怎么用原生js获取浏览器的滚动距离

要用原生JS获取浏览器的滚动距离，可以使用window.pageYOffset、document.documentElement.scrollTop、document.body.scrollTop。其中，window.pageYOffset 是最常用的，因为它在所有现代浏览器中都得到了很好的支持。下面将详细介绍这些方法，并讨论它们的优缺点。

获取滚动距离不仅仅是为了简单的读数，它可以在多种场景中应用，例如懒加载图片、固定导航栏、无限滚动等。下面将详细介绍如何使用这些方法及其应用场景。

一、使用 window.pageYOffset 和 window.pageXOffset

window.pageYOffset 和 window.pageXOffset 是获取垂直和水平滚动距离的最常用方法。这两个属性分别返回文档在垂直和水平方向上已滚动的像素数。

let scrollTop = window.pageYOffset; // 垂直滚动距离

let scrollLeft = window.pageXOffset; // 水平滚动距离

优点：

• 兼容性好：几乎所有现代浏览器都支持这两个属性。
• 直观易用：不需要考虑浏览器差异。

缺点：

• 对于非常旧的浏览器可能不支持，但这在大多数情况下不再是问题。

二、使用 document.documentElement.scrollTop 和 document.documentElement.scrollLeft

在一些较旧的浏览器中，document.documentElement.scrollTop 和 document.documentElement.scrollLeft 是获取滚动距离的常见方法。

let scrollTop = document.documentElement.scrollTop; // 垂直滚动距离

let scrollLeft = document.documentElement.scrollLeft; // 水平滚动距离

优点：

• 兼容较旧浏览器：对于一些老旧浏览器，例如IE，可以使用这些属性获取滚动距离。

缺点：

• 需要与其他方法结合使用，以确保跨浏览器兼容性。

三、使用 document.body.scrollTop 和 document.body.scrollLeft

在非常旧的浏览器中，document.body.scrollTop 和 document.body.scrollLeft 也可以用来获取滚动距离。

let scrollTop = document.body.scrollTop; // 垂直滚动距离

let scrollLeft = document.body.scrollLeft; // 水平滚动距离

优点：

• 兼容非常旧的浏览器：例如一些旧版的IE浏览器。

缺点：

• 不推荐在现代浏览器中使用，因为它们可能不一致。

四、综合使用获取滚动距离

为了确保代码在所有浏览器中都能正常工作，通常会将上述方法结合使用：

function getScrollPosition() {

    return {
        scrollTop: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
        scrollLeft: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
    };
}
let scrollPosition = getScrollPosition();
console.log(`垂直滚动距离: ${scrollPosition.scrollTop}`);
console.log(`水平滚动距离: ${scrollPosition.scrollLeft}`);

优点：

• 兼容性最佳：确保在所有浏览器中都能正常工作。

缺点：

• 代码稍微复杂一些，但完全可维护。

五、应用场景

1、懒加载图片

在滚动到某个位置时，加载图片以节省带宽和提升性能：

window.addEventListener('scroll', function() {

    let scrollPosition = getScrollPosition().scrollTop;
    let lazyImages = document.querySelectorAll('img[data-src]');
    lazyImages.forEach(img => {
        if (img.offsetTop < window.innerHeight + scrollPosition) {
            img.src = img.getAttribute('data-src');
            img.removeAttribute('data-src');
        }
    });
});

2、固定导航栏

在用户滚动到一定距离时，固定导航栏在页面顶部：

let navbar = document.getElementById('navbar');

let sticky = navbar.offsetTop;
window.addEventListener('scroll', function() {
    if (window.pageYOffset >= sticky) {
        navbar.classList.add('sticky');
    } else {
        navbar.classList.remove('sticky');
    }
});

3、无限滚动

在用户滚动到页面底部时，加载更多内容：

window.addEventListener('scroll', function() {

    if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
        // 加载更多内容
    }
});

六、跨设备和浏览器的注意事项

在不同的设备和浏览器中，滚动行为可能有所不同。例如，在某些移动设备上，滚动条可能会被隐藏，这时获取滚动距离的逻辑可能需要调整。尽量使用标准和广泛支持的方法，同时进行充分的测试，确保代码在各种情况下都能正常工作。

七、性能优化

在处理滚动事件时，要注意性能问题。频繁触发的滚动事件可能导致性能下降，建议进行性能优化，例如使用防抖或节流技术：

function throttle(fn, wait) {

    let lastTime = 0;
    return function(...args) {
        let now = Date.now();
        if (now - lastTime >= wait) {
            fn.apply(this, args);
            lastTime = now;
        }
    };
}
window.addEventListener('scroll', throttle(function() {
    let scrollPosition = getScrollPosition().scrollTop;
    // 处理滚动事件
}, 100));

八、总结

获取浏览器的滚动距离是Web开发中的常见需求，window.pageYOffset、document.documentElement.scrollTop、document.body.scrollTop 是常用的方法。结合使用这些方法可以确保代码在各种浏览器中都能正常工作。在实际应用中，获取滚动距离可以用于懒加载、固定导航栏、无限滚动等场景。注意不同设备和浏览器的差异，并进行必要的性能优化，确保用户体验的流畅性。

希望这篇文章对你理解和应用获取滚动距离的技术有所帮助！

相关问答FAQs：

1. 如何使用原生JS获取浏览器的滚动距离？

可以通过以下方式来获取浏览器的滚动距离：

var scrollDistance = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

这段代码会返回一个整数，表示当前页面已经滚动的垂直距离。如果页面未发生垂直滚动，则返回0。

2. 如何监测浏览器滚动并获取滚动距离？

你可以使用以下代码来监测浏览器滚动并获取滚动距离：

window.addEventListener('scroll', function() {
  var scrollDistance = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
  console.log('当前滚动距离为：', scrollDistance);
});

这段代码会在页面发生滚动时触发一个事件，并将滚动距离打印到控制台上。

3. 如何使用原生JS判断用户是否滚动到页面底部？

你可以使用以下代码来判断用户是否滚动到页面底部：

window.addEventListener('scroll', function() {
  var scrollDistance = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
  var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
  var documentHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight);

  if (scrollDistance + windowHeight >= documentHeight) {
    console.log('已滚动到页面底部');
  }
});

这段代码会在用户滚动到页面底部时触发一个事件，并将相关提示打印到控制台上。