BOM页面平滑滚动实现方法详解

本篇文章给大家分享《BOM实现页面平滑滚动方法解析》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

要实现页面的平滑滚动，核心在于利用BOM接口结合requestAnimationFrame逐步更新滚动位置。1. 使用window.scrollTo()或scrollTop属性控制滚动目标；2. 通过requestAnimationFrame实现与浏览器刷新率同步的动画循环；3. 引入缓动函数（如ease-out）提升滚动自然感；4. 记录起始时间、计算进度并动态调整滚动位置；5. 在动画完成或用户干预时及时终止循环。相比CSS的scroll-behavior: smooth，该方法具备更高的控制粒度、更广的兼容性和更强的扩展性，适用于复杂交互场景。开发时应封装为可复用函数，并支持目标参数化、偏移量设置、容器滚动及Promise回调等特性，以提升代码效率和用户体验。

要实现页面的平滑滚动，核心在于利用浏览器提供的BOM（Browser Object Model）接口，特别是window.scrollTo()或window.scrollBy()，并结合动画循环机制（通常是requestAnimationFrame）来逐步、平滑地改变滚动位置，而不是一下子跳过去。这就像电影里的慢镜头，把一个瞬间的动作分解成无数个微小的帧，让它看起来连贯自然。

解决方案

平滑滚动的基本思路是计算出每次动画帧需要滚动的距离，然后不断更新页面的scrollTop或scrollLeft属性，直到达到目标位置。这个过程需要一个起始点、一个目标点、一个动画持续时间，以及一个决定动画速度变化的“缓动函数”（easing function）。

我们通常会这样做：

1. 记录初始状态：获取当前的滚动位置和目标滚动位置。
2. 计算动画总时长：确定滚动需要多少毫秒完成。
3. 使用requestAnimationFrame：这是一个浏览器API，告诉浏览器你希望执行一个动画，并请求浏览器在下一次重绘之前调用你指定的回调函数。它比setTimeout或setInterval更适合动画，因为它能确保动画与浏览器的刷新率同步，避免卡顿和掉帧。
4. 在回调函数中：
   • 计算自动画开始以来经过的时间。
   • 根据经过的时间和缓动函数，计算出当前应该滚动的进度（0到1之间的一个值）。
   • 根据进度和总滚动距离，计算出当前应该到达的滚动位置。
   • 调用window.scrollTo()或直接设置document.documentElement.scrollTop（或document.body.scrollTop，取决于文档模式）来更新滚动位置。
   • 如果动画还没结束，继续调用requestAnimationFrame，形成循环。
   • 如果动画结束，停止循环。

这是一个简化的JavaScript示例：

function smoothScrollTo(targetY, duration = 500) {
    const startY = window.pageYOffset; // 当前滚动位置
    const distanceY = targetY - startY; // 需要滚动的总距离
    let startTime = null;

    // 缓动函数：这里用一个简单的 ease-out
    const easeOutQuad = (t) => t * (2 - t);

    function animateScroll(currentTime) {
        if (!startTime) startTime = currentTime;
        const elapsedTime = currentTime - startTime;
        const progress = Math.min(elapsedTime / duration, 1); // 进度，0到1
        const easedProgress = easeOutQuad(progress); // 应用缓动函数

        window.scrollTo(0, startY + distanceY * easedProgress);

        if (progress < 1) {
            requestAnimationFrame(animateScroll);
        }
    }

    requestAnimationFrame(animateScroll);
}

// 示例用法：点击按钮平滑滚动到页面顶部
// document.getElementById('backToTopBtn').addEventListener('click', () => {
//     smoothScrollTo(0);
// });

为什么不直接用CSS的scroll-behavior: smooth？

说实话，当scroll-behavior: smooth这个CSS属性出来的时候，我心里是窃喜的，觉得终于可以少写点JS了。它确实方便，只需要在CSS里给html或body加上scroll-behavior: smooth;，然后当你点击一个锚点链接（如）或者调用element.scrollIntoView()时，页面就会自动平滑滚动，省心省力。

但话说回来，这东西虽然好用，却不是万能的。它有几个明显的局限性：

1. 控制粒度不够：CSS的smooth只是一个开关，你无法自定义动画的时长、缓动曲线。比如，你可能希望某个滚动特别快，另一个则慢悠悠地滑过去，CSS就做不到了。它就是“平滑”，但具体怎么“平滑”，它说了算，你说了不算。
2. 兼容性问题：虽然现代浏览器支持度不错，但如果你需要兼容一些老旧的浏览器，或者你的用户群体中有大量使用特定旧版浏览器的，那CSS方案可能就得打个问号了。BOM方案虽然复杂点，但兼容性通常更好，因为它是基于JavaScript的通用能力。
3. 不适用于任意滚动：scroll-behavior: smooth主要针对的是由用户行为（如点击锚点）或scrollIntoView()触发的滚动。如果你想实现一个按钮，点击后平滑滚动到页面某个计算出来的、非固定位置（比如某个动态加载的内容顶部），或者你希望在特定事件发生时（比如数据加载完成）自动滚动到某个区域，CSS就有点力不从心了。BOM方案则提供了对window.scrollTo和window.scrollBy的完全控制，可以精确地指定滚动目标。
4. 缺乏事件回调：CSS动画是“fire and forget”式的，你无法知道动画什么时候开始、什么时候结束，也就没法在动画完成后执行其他操作。而JS方案可以通过Promise或者回调函数来监听动画完成事件，这在很多复杂交互场景下是必不可少的。

所以，在我看来，scroll-behavior: smooth更适合那些对滚动控制要求不高、追求快速实现且不考虑老旧浏览器兼容性的场景。一旦你需要更精细的控制、更复杂的逻辑，或者更广泛的兼容性，BOM方案依然是你的首选，因为它给了你真正的“主宰权”。

实现平滑滚动时，如何处理动画性能和用户体验？

平滑滚动这事儿，搞不好就成了“卡顿滚动”或者“抽搐滚动”，所以性能和用户体验是重中之重。

动画性能方面：

• requestAnimationFrame的魔力：我前面提过，用requestAnimationFrame是关键。它不是简单地每隔多少毫秒执行一次，而是告诉浏览器：“喂，我这里有个动画，你下次渲染画面前记得叫我一声，我好更新一下位置。”浏览器会把多个动画请求合并处理，并在最佳时机执行，这能有效减少不必要的重绘和回流，避免动画卡顿。对比setTimeout和setInterval，后两者可能在浏览器忙碌时导致帧率不稳定，甚至掉帧，而requestAnimationFrame则能更好地与浏览器的渲染周期同步。
• 避免在循环内做重活：在requestAnimationFrame的回调函数里，只做最核心的计算和DOM操作——更新滚动位置。避免在这个函数里执行复杂的DOM查询、大量的布局计算或者网络请求。这些“重活”应该在动画开始前就准备好，或者在动画结束后再进行。
• 精简DOM操作：虽然我们只操作了scrollTop，但也要注意，频繁地读写DOM属性（特别是那些会触发布局重算的属性）是性能杀手。好在scrollTop的设置相对轻量，但如果动画涉及到更复杂的元素位置变化，就要特别小心了。

用户体验方面：

• 缓动函数（Easing Function）的选择：这玩意儿简直是平滑滚动的灵魂！一个线性的滚动（匀速）会显得很生硬，就像机器人走路。而一个好的缓动函数能让滚动过程更自然、更富有生命力。
  • Ease-out：动画开始时快，结束时慢，给人一种“刹车”的感觉，很常用，比如我上面示例用的easeOutQuad。
  • Ease-in：动画开始时慢，结束时快，有点像“加速”的感觉。
  • Ease-in-out：开始和结束都慢，中间快，感觉最平滑自然，就像汽车起步加速再减速停车。 你可以去搜一下“Penner's easing functions”，里面有各种各样的数学公式，能模拟出不同的动画效果。选择一个合适的缓动函数，能极大提升用户感知的流畅度。
• 动画时长：这是一个经验值。太短（比如100ms）会感觉像瞬间跳跃，不够“平滑”；太长（比如2000ms）又会让人觉得等待太久，失去耐心。通常，300ms到800ms是一个比较舒服的范围，具体取决于滚动的距离和内容的重要性。短距离可以快一点，长距离可以适当放慢。
• 可中断性：用户在动画过程中可能会手动滚动页面。一个好的平滑滚动函数应该能检测到用户的干预，并立即停止当前的动画，将控制权交还给用户。这通常通过监听scroll事件，并在用户滚动时清除当前的requestAnimationFrame来实现。
• 目标明确：确保用户知道滚动会去哪里。如果滚动目标在屏幕外很远的地方，最好能给用户一个视觉提示，比如滚动条的变化或者一个指示器。

综合来说，实现平滑滚动不仅仅是写几行代码那么简单，它涉及到对浏览器渲染机制的理解，以及对用户心理的把握。

编写可复用的平滑滚动函数有哪些技巧？

为了避免每次需要平滑滚动时都写一堆重复的代码，把逻辑封装成一个可复用的函数是明智之举。一个健壮且灵活的平滑滚动函数，通常会考虑以下几点：

1. 参数化设计：

   • target：目标位置，可以是数字（Y坐标），也可以是一个DOM元素（函数内部计算其Y坐标）。这让函数既能滚动到精确的像素位置，也能滚动到某个元素的顶部。
   • duration：动画持续时间，毫秒为单位，默认值可以设为500ms。
   • easing：缓动函数，可以作为参数传入。这样用户可以根据需要选择不同的缓动效果。如果用户不传，就用一个默认的（比如easeOutQuad）。
   • offset：滚动到目标位置时，可以有一个额外的偏移量。比如，你滚动到一个标题，但希望标题上方留出50px的间距，这个参数就很有用。

2. 返回Promise：让函数返回一个Promise，这样外部代码就能知道动画何时完成，从而在动画结束后执行其他操作。这比传统的传入回调函数更现代，也更利于异步流程控制。

3. 处理多重调用和中断：

   • 取消上一个动画：如果用户在当前动画还没结束时又触发了新的滚动，应该立即停止前一个动画，开始新的动画。这可以通过保存当前的requestAnimationFrame ID，并在新动画开始前调用cancelAnimationFrame来实现。
   • 用户手动滚动中断：监听scroll事件。如果用户在动画进行中手动滚动了页面，也应该立即取消当前的动画。这需要一个标志位来区分是程序滚动还是用户滚动。

4. 支持滚动特定容器：不仅仅是window，有时我们也需要让某个可滚动容器（div、iframe等）内部平滑滚动。函数应该能接受一个container参数，如果提供了，就操作这个容器的scrollTop，否则默认操作window。

5. 健壮性考虑：

   • 边界条件：目标位置是否有效？持续时间是否为正数？
   • 兼容性：考虑document.documentElement.scrollTop和document.body.scrollTop在不同浏览器和文档模式下的差异。通常现代浏览器推荐使用document.documentElement.scrollTop。

这是一个更完善的平滑滚动函数骨架：

let currentScrollAnimationId = null; // 用于存储当前的 requestAnimationFrame ID

function getScrollParent(element) {
    let parent = element.parentNode;
    while (parent && parent !== document.body && parent !== document.documentElement) {
        const style = getComputedStyle(parent);
        if (style.overflowY === 'auto' || style.overflowY === 'scroll') {
            return parent;
        }
        parent = parent.parentNode;
    }
    return window; // 默认返回window
}

function smoothScroll(target, options = {}) {
    if (currentScrollAnimationId) {
        cancelAnimationFrame(currentScrollAnimationId);
        currentScrollAnimationId = null;
    }

    const {
        duration = 500,
        easing = (t) => t * (2 - t), // 默认 easeOutQuad
        offset = 0,
        container = window // 默认滚动window，也可以传入DOM元素
    } = options;

    let startY;
    let targetY;
    let scrollElement;

    if (container === window) {
        startY = window.pageYOffset;
        scrollElement = document.documentElement; // 现代浏览器通常用这个
        if (document.body.scrollTop) { // 兼容IE和旧版Safari
            scrollElement = document.body;
        }
    } else {
        startY = container.scrollTop;
        scrollElement = container;
    }

    if (typeof target === 'number') {
        targetY = target;
    } else if (target instanceof HTMLElement) {
        const rect = target.getBoundingClientRect();
        if (container === window) {
            targetY = rect.top + window.pageYOffset;
        } else {
            const containerRect = container.getBoundingClientRect();
            targetY = rect.top - containerRect.top + container.scrollTop;
        }
    } else {
        console.error('Invalid target for smoothScroll. Must be a number or an HTMLElement.');
        return Promise.reject('Invalid target');
    }

    targetY += offset;

    const distanceY = targetY - startY;
    let startTime = null;

    return new Promise((resolve) => {
        function animateScroll(currentTime) {
            if (!startTime) startTime = currentTime;
            const elapsedTime = currentTime - startTime;
            const progress = Math.min(elapsedTime / duration, 1);
            const easedProgress = easing(progress);

            const newScrollPos = startY + distanceY * easedProgress;

            if (container === window) {
                window.scrollTo(0, newScrollPos);
            } else {
                scrollElement.scrollTop = newScrollPos;
            }

            if (progress < 1) {
                currentScrollAnimationId = requestAnimationFrame(animateScroll);
            } else {
                currentScrollAnimationId = null;
                resolve(); // 动画完成
            }
        }

        currentScrollAnimationId = requestAnimationFrame(animateScroll);
    });
}

// 示例用法：
// 1. 平滑滚动到页面顶部
// smoothScroll(0).then(() => console.log('滚动到顶部完成！'));

// 2. 平滑滚动到某个元素
// const myElement = document.getElementById('some-section');
// if (myElement) {
//     smoothScroll(myElement, { duration: 800, offset: -20 }).then(() => {
//         console.log('滚动到指定元素完成！');
//     });
// }

// 3. 平滑滚动某个容器内部
// const scrollableDiv = document.getElementById('my-scrollable-div');
// if (scrollableDiv) {
//     smoothScroll(0, { container: scrollableDiv, duration: 600 }).then(() => {
//         console.log('div内部滚动到顶部完成！');
//     });
// }

这个函数虽然看起来复杂了一点，但它提供了很高的灵活性和可维护性。在实际项目中，一个这样封装好的工具函数能大大提升开发效率和代码质量。

以上就是《BOM页面平滑滚动实现方法详解》的详细内容，更多关于的资料请关注golang学习网公众号！