用js怎么得到滚动条的位置

用JavaScript获取滚动条位置的方法有很多，具体包括获取垂直滚动位置、水平滚动位置和兼容性处理等。 首先介绍最简单的方法，即使用 window.pageYOffset 和 window.pageXOffset 来获取垂直和水平滚动条的位置。这两个属性在大多数现代浏览器中都可以正常工作。

window.pageYOffset、window.pageXOffset、document.documentElement.scrollTop、document.documentElement.scrollLeft，其中window.pageYOffset是获取垂直滚动条位置的最常用方法。例如：

const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

一、获取垂直滚动位置

1、使用 window.pageYOffset

window.pageYOffset 是获取垂直滚动位置的最简单方法。它返回页面在垂直方向上已滚动的像素数。

let scrollPosition = window.pageYOffset;

console.log(`垂直滚动位置: ${scrollPosition}`);

2、兼容性处理

在某些老旧浏览器中，window.pageYOffset 可能无法正常工作，因此需要使用 document.documentElement.scrollTop 或 document.body.scrollTop 来获取滚动位置。

let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

console.log(`垂直滚动位置: ${scrollTop}`);

二、获取水平滚动位置

1、使用 window.pageXOffset

与垂直滚动位置类似，window.pageXOffset 返回页面在水平方向上已滚动的像素数。

let scrollPosition = window.pageXOffset;

console.log(`水平滚动位置: ${scrollPosition}`);

2、兼容性处理

同样，为了处理某些老旧浏览器的兼容性问题，可以使用 document.documentElement.scrollLeft 或 document.body.scrollLeft 来获取水平滚动位置。

let scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;

console.log(`水平滚动位置: ${scrollLeft}`);

三、封装成函数

为了方便在多个地方使用，可以将获取滚动位置的逻辑封装成一个函数。

function getScrollPosition() {

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

四、监听滚动事件

在实际应用中，经常需要监听用户的滚动行为，并实时获取滚动位置。可以通过监听 scroll 事件来实现这一需求。

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

    let scrollPosition = getScrollPosition();
    console.log(`垂直滚动位置: ${scrollPosition.top}, 水平滚动位置: ${scrollPosition.left}`);
});

五、应用场景

1、实现返回顶部功能

获取滚动位置的一个常见应用是实现返回顶部按钮。只有当用户滚动到一定位置时，返回顶部按钮才会显示。

let backToTopBtn = document.getElementById('backToTop');

window.addEventListener('scroll', function() {
    let scrollPosition = getScrollPosition();
    if (scrollPosition.top > 300) {
        backToTopBtn.style.display = 'block';
    } else {
        backToTopBtn.style.display = 'none';
    }
});
backToTopBtn.addEventListener('click', function() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
});

2、懒加载图片

在页面滚动时，通过获取滚动位置可以实现懒加载图片的功能。当图片进入视口时才进行加载，从而提升页面性能。

let images = document.querySelectorAll('img.lazy-load');

function lazyLoad() {
    let scrollPosition = getScrollPosition();
    images.forEach(image => {
        let rect = image.getBoundingClientRect();
        if (rect.top < window.innerHeight && rect.bottom > 0) {
            image.src = image.dataset.src;
            image.classList.remove('lazy-load');
        }
    });
}
window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);
window.addEventListener('DOMContentLoaded', lazyLoad);

六、总结

通过使用 window.pageYOffset 和 window.pageXOffset，以及兼容性处理，可以轻松获取页面的垂直和水平滚动位置。将这些方法封装成函数，并结合 scroll 事件监听，可以实现诸如返回顶部按钮、懒加载图片等功能，从而提升用户体验和页面性能。

在项目管理中，使用专业的项目管理工具可以提升团队的协作效率和项目进度。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，这些工具可以帮助团队更好地管理任务和进度，提升工作效率。

相关问答FAQs：

1. 为什么我需要获取滚动条的位置？
获取滚动条的位置可以帮助你实现一些与页面交互和布局相关的功能，比如无限滚动、懒加载、滚动监听等。通过获取滚动条的位置，你可以根据需求进行相应的处理。

2. 如何使用JavaScript获取滚动条的位置？
你可以使用JavaScript的scrollX和scrollY属性来获取滚动条的位置。scrollX表示水平滚动条的位置，scrollY表示垂直滚动条的位置。例如，要获取垂直滚动条的位置，你可以使用window.scrollY。

3. 如何实时监测滚动条的位置变化？
如果你需要实时监测滚动条的位置变化，你可以使用scroll事件来监听滚动条的滚动。当滚动条滚动时，scroll事件会被触发，你可以在事件处理函数中获取滚动条的位置，并进行相应的处理。例如，可以使用以下代码来监听滚动条的滚动并获取垂直滚动条的位置：

window.addEventListener('scroll', function() {
  var scrollY = window.scrollY;
  console.log('垂直滚动条位置：' + scrollY);
});