MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

JavaScript处理文档滚动位置的方法

2024-06-094.2k 阅读

一、获取文档滚动位置

在JavaScript中，获取文档滚动位置是处理滚动相关功能的基础。不同浏览器环境下获取滚动位置的方式略有不同，下面我们详细探讨。

1.1 window.pageXOffset 和 window.pageYOffset

现代浏览器（包括IE9及以上版本）提供了 window.pageXOffset 和 window.pageYOffset 属性来获取文档在水平和垂直方向上的滚动距离。

// 获取水平滚动距离
const horizontalScroll = window.pageXOffset;
// 获取垂直滚动距离
const verticalScroll = window.pageYOffset;
console.log('水平滚动距离:', horizontalScroll);
console.log('垂直滚动距离:', verticalScroll);

这两个属性返回的值是文档从左上角开始在相应方向上滚动的像素数。

1.2 document.documentElement.scrollLeft 和 document.documentElement.scrollTop

在一些早期浏览器（如IE8及以下）中，需要通过 document.documentElement.scrollLeft 和 document.documentElement.scrollTop 来获取滚动位置。

function getScrollLeft() {
    return document.documentElement.scrollLeft || document.body.scrollLeft;
}
function getScrollTop() {
    return document.documentElement.scrollTop || document.body.scrollTop;
}
const left = getScrollLeft();
const top = getScrollTop();
console.log('水平滚动距离:', left);
console.log('垂直滚动距离:', top);

这里通过 || 运算符，优先获取 document.documentElement 的滚动值，如果该值为0，则尝试获取 document.body 的滚动值。这是因为在某些浏览器中，滚动值可能会被错误地记录在 document.body 上。

1.3 兼容性封装

为了确保在各种浏览器环境下都能准确获取滚动位置，我们可以封装一个兼容性函数。

function getScrollPosition() {
    return {
        x: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
        y: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    };
}
const position = getScrollPosition();
console.log('水平滚动距离:', position.x);
console.log('垂直滚动距离:', position.y);

这个函数综合了不同浏览器获取滚动位置的方法，返回一个包含水平和垂直滚动距离的对象。

二、监听文档滚动事件

获取滚动位置后，我们常常需要对滚动事件进行监听，以便在文档滚动时执行相应的操作。

2.1 使用 window.addEventListener('scroll')

现代浏览器可以通过 window.addEventListener('scroll') 来监听滚动事件。

window.addEventListener('scroll', function () {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    console.log('当前垂直滚动距离:', scrollTop);
});

每次文档滚动时，这个回调函数都会被触发，我们可以在回调函数中获取当前滚动位置，并执行诸如改变元素样式、加载更多内容等操作。

2.2 节流与防抖

在处理滚动事件时，频繁触发回调函数可能会导致性能问题。例如，如果在滚动事件回调中进行复杂的DOM操作，可能会使页面卡顿。这时可以使用节流（throttle）和防抖（debounce）技术。

2.2.1 节流

节流是指在一定时间内，只允许回调函数执行一次。例如，我们可以设置每200毫秒执行一次回调函数，而不是每次滚动都执行。

function throttle(func, delay) {
    let timer = null;
    return function () {
        if (!timer) {
            func.apply(this, arguments);
            timer = setTimeout(() => {
                timer = null;
            }, delay);
        }
    };
}
const throttledScrollHandler = throttle(function () {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    console.log('节流后当前垂直滚动距离:', scrollTop);
}, 200);
window.addEventListener('scroll', throttledScrollHandler);

在这个 throttle 函数中，我们使用一个 timer 来记录上次执行的时间，只有当 timer 为 null 时，才执行传入的函数，并重新设置 timer，在 delay 时间后将 timer 重置为 null，这样就保证了在 delay 时间内函数只执行一次。

2.2.2 防抖

防抖是指在一定时间内，如果事件被频繁触发，则只执行最后一次。例如，用户快速滚动页面，只有当用户停止滚动一段时间后，才执行回调函数。

function debounce(func, delay) {
    let timer = null;
    return function () {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            func.apply(this, arguments);
            timer = null;
        }, delay);
    };
}
const debouncedScrollHandler = debounce(function () {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    console.log('防抖后当前垂直滚动距离:', scrollTop);
}, 300);
window.addEventListener('scroll', debouncedScrollHandler);

在 debounce 函数中，每次触发事件时，如果 timer 存在，则清除之前设置的 timer，然后重新设置一个新的 timer。只有当 delay 时间内没有再次触发事件时，才执行传入的函数。

三、控制文档滚动位置

除了获取和监听滚动位置，JavaScript还提供了方法来控制文档的滚动位置。

3.1 window.scrollTo()

window.scrollTo() 方法用于将文档滚动到指定的坐标位置。

// 滚动到水平位置100px，垂直位置200px
window.scrollTo(100, 200);

它接受两个参数，第一个参数是水平滚动距离（x 坐标），第二个参数是垂直滚动距离（y 坐标）。

3.2 window.scrollBy()

window.scrollBy() 方法用于相对当前位置滚动文档。

// 相对当前位置，水平滚动50px，垂直滚动100px
window.scrollBy(50, 100);

该方法的参数同样是水平和垂直方向的滚动距离，但这里的距离是相对于当前滚动位置的偏移量。

3.3 Element.scrollIntoView()

Element.scrollIntoView() 方法可以将指定的元素滚动到浏览器窗口的可见区域内。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>scrollIntoView示例</title>
</head>

<body>
    <div style="height: 1000px;"></div>
    <div id="target" style="height: 200px; background-color: lightblue;">这是目标元素</div>
    <div style="height: 1000px;"></div>
    <script>
        const targetElement = document.getElementById('target');
        targetElement.scrollIntoView();
    </script>
</body>

</html>

在上述示例中，页面中有一个较长的文档，当执行 targetElement.scrollIntoView() 时，id为 target 的元素会滚动到浏览器窗口的可见区域。scrollIntoView() 方法还可以接受一个布尔值参数或一个配置对象参数，用于更精细地控制滚动行为。例如：

// 使目标元素的顶部与视口顶部对齐
targetElement.scrollIntoView(true);
// 使目标元素的底部与视口底部对齐
targetElement.scrollIntoView({
    behavior: 'smooth',
    block: 'end'
});

这里通过 behavior: 'smooth' 实现了平滑滚动效果，block: 'end' 表示将目标元素的底部与视口底部对齐。

四、基于滚动位置的常见应用场景

4.1 实现回到顶部按钮

回到顶部按钮是网页中常见的功能，通过获取滚动位置并控制滚动，我们可以轻松实现这个功能。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>回到顶部按钮示例</title>
    <style>
        #backToTop {
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: none;
            background-color: #007BFF;
            color: white;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div style="height: 2000px;">
        <p>滚动页面以查看回到顶部按钮的效果</p>
    </div>
    <button id="backToTop">回到顶部</button>
    <script>
        const backToTopButton = document.getElementById('backToTop');
        window.addEventListener('scroll', function () {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            if (scrollTop > 100) {
                backToTopButton.style.display = 'block';
            } else {
                backToTopButton.style.display = 'none';
            }
        });
        backToTopButton.addEventListener('click', function () {
            window.scrollTo({
                top: 0,
                behavior:'smooth'
            });
        });
    </script>
</body>

</html>

在这个示例中，我们监听页面滚动事件，当滚动距离超过100px时，显示回到顶部按钮；当点击按钮时，使用 window.scrollTo() 方法并设置 behavior:'smooth' 实现平滑滚动回到顶部。

4.2 懒加载图片

懒加载图片是提高网页性能的重要手段，它基于滚动位置来判断图片是否进入视口，从而决定是否加载图片。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>图片懒加载示例</title>
    <style>
        img {
            width: 300px;
            height: 200px;
            margin: 10px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div style="height: 1000px;"></div>
    <img data-src="image1.jpg" alt="图片1" class="lazyload">
    <div style="height: 1000px;"></div>
    <img data-src="image2.jpg" alt="图片2" class="lazyload">
    <div style="height: 1000px;"></div>
    <script>
        const lazyloadImages = document.querySelectorAll('.lazyload');
        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    img.src = img.dataset.src;
                    observer.unobserve(img);
                }
            });
        });
        lazyloadImages.forEach(image => {
            observer.observe(image);
        });
    </script>
</body>

</html>

这里使用了 IntersectionObserver API，它可以异步观察目标元素与其祖先元素或视口的交集变化情况。当图片进入视口（isIntersecting 为 true）时，将 data - src 的值赋给 src 属性，从而加载图片，并停止观察该图片。

4.3 粘性导航栏

粘性导航栏在页面滚动到一定位置时，固定在页面顶部，方便用户操作。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>粘性导航栏示例</title>
    <style>
        nav {
            background-color: #333;
            color: white;
            padding: 10px;
        }

        nav.sticky {
            position: fixed;
            top: 0;
            width: 100%;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        body {
            margin: 0;
        }

        section {
            height: 1000px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <nav id="navbar">
        <a href="#">首页</a>
        <a href="#">关于</a>
        <a href="#">服务</a>
    </nav>
    <section>内容区域1</section>
    <section>内容区域2</section>
    <section>内容区域3</section>
    <script>
        const navbar = document.getElementById('navbar');
        window.addEventListener('scroll', function () {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            if (scrollTop > 100) {
                navbar.classList.add('sticky');
            } else {
                navbar.classList.remove('sticky');
            }
        });
    </script>
</body>

</html>

在这个示例中，我们监听页面滚动事件，当滚动距离超过100px时，给导航栏添加 sticky 类，该类通过CSS设置导航栏固定在页面顶部，并添加阴影效果；当滚动距离小于100px时，移除 sticky 类，导航栏恢复原来的位置。

五、处理文档滚动位置的性能优化

在处理文档滚动位置相关功能时，性能优化至关重要，以下是一些优化建议。

5.1 减少DOM操作

频繁的DOM操作会导致重排（reflow）和重绘（repaint），严重影响性能。例如，在滚动事件回调中，避免多次修改元素的样式，尽量一次性修改多个样式。

// 不好的做法
window.addEventListener('scroll', function () {
    const element = document.getElementById('myElement');
    element.style.left = window.pageXOffset + 'px';
    element.style.top = window.pageYOffset + 'px';
    element.style.color = 'red';
});
// 好的做法
window.addEventListener('scroll', function () {
    const element = document.getElementById('myElement');
    const newStyle = `left: ${window.pageXOffset}px; top: ${window.pageYOffset}px; color: red;`;
    element.style.cssText = newStyle;
});

在好的做法中，我们通过 cssText 一次性设置多个样式，减少了重排和重绘的次数。

5.2 使用requestAnimationFrame

requestAnimationFrame 是浏览器提供的一个用于在下次重绘之前执行回调函数的方法。它会根据浏览器的刷新频率来执行回调，通常是每秒60次，这样可以保证动画的流畅性，同时避免不必要的计算。

function updateScroll() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    // 执行与滚动相关的操作
    console.log('当前垂直滚动距离:', scrollTop);
    requestAnimationFrame(updateScroll);
}
requestAnimationFrame(updateScroll);

在这个示例中，我们通过 requestAnimationFrame 不断调用 updateScroll 函数，这样可以在每次浏览器重绘之前获取最新的滚动位置，并执行相关操作。

5.3 避免过度计算

在滚动事件回调中，避免进行复杂的计算。如果必须进行计算，可以考虑使用缓存或节流、防抖技术。例如，如果需要根据滚动位置计算一些值，并且这些值在短时间内不会改变，可以将计算结果缓存起来。

let cachedScrollValue;
window.addEventListener('scroll', function () {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    if (!cachedScrollValue || scrollTop > cachedScrollValue + 100) {
        // 进行复杂计算
        const result = performComplexCalculation(scrollTop);
        cachedScrollValue = scrollTop;
        // 使用计算结果
        console.log('计算结果:', result);
    }
});
function performComplexCalculation(scroll) {
    // 模拟复杂计算
    let sum = 0;
    for (let i = 0; i < 1000000; i++) {
        sum += i * scroll;
    }
    return sum;
}

在这个示例中，我们通过 cachedScrollValue 缓存计算结果，只有当滚动距离变化超过100px时，才重新进行复杂计算，这样可以减少不必要的计算开销。

六、不同浏览器下的兼容性问题及解决方案

虽然现代浏览器在处理文档滚动位置方面已经有了较好的一致性，但仍然存在一些兼容性问题需要注意。

6.1 旧版本IE浏览器

如前文所述，旧版本IE浏览器（IE8及以下）不支持 window.pageXOffset 和 window.pageYOffset，需要通过 document.documentElement.scrollLeft 和 document.documentElement.scrollTop 来获取滚动位置，并且某些情况下可能需要从 document.body 获取。我们通过前面提到的兼容性封装函数来解决这个问题。

6.2 Safari浏览器的一些特殊情况

在Safari浏览器中，对于 Element.scrollIntoView() 方法的平滑滚动效果，可能需要额外设置 -webkit - scroll - behavior: smooth; 样式到文档的根元素（通常是 html 元素）。

<!DOCTYPE html>
<html style="-webkit - scroll - behavior: smooth; scroll - behavior: smooth;">

<head>
    <meta charset="UTF-8">
    <title>Safari平滑滚动示例</title>
</head>

<body>
    <div style="height: 2000px;"></div>
    <div id="target" style="height: 200px; background-color: lightblue;">这是目标元素</div>
    <div style="height: 2000px;"></div>
    <script>
        const targetElement = document.getElementById('target');
        targetElement.scrollIntoView({
            behavior:'smooth'
        });
    </script>
</body>

</html>

这样设置后，在Safari浏览器中也能实现平滑滚动效果。

6.3 移动端浏览器

移动端浏览器在处理滚动事件时，可能会有一些特殊的行为。例如，一些移动端浏览器会有弹性滚动效果，这可能会影响到我们对滚动位置的精确控制。为了避免这种情况，可以使用CSS属性 overscroll - behavior: contain; 来限制弹性滚动。

html {
    overscroll - behavior: contain;
}

同时，在移动端监听滚动事件时，要注意事件的触发频率和性能。可以结合节流、防抖技术以及 requestAnimationFrame 来优化滚动相关功能的性能。

通过以上对JavaScript处理文档滚动位置的方法、应用场景、性能优化以及兼容性问题的详细介绍，相信你已经对这一领域有了较为深入的理解。在实际开发中，根据项目的需求和目标浏览器，合理运用这些技术，可以为用户带来更好的体验。