js如何获取滚动条距离顶部的距离

JS 获取滚动条距离顶部的距离：使用 window.scrollY、document.documentElement.scrollTop、document.body.scrollTop 等方法

在网页开发中，获取滚动条距离顶部的距离是一个常见的需求。可以使用 window.scrollY、document.documentElement.scrollTop 和 document.body.scrollTop 三种方式来获取滚动条距离顶部的距离。其中，window.scrollY 是现代浏览器支持的标准属性，使用方便且兼容性较好。下面将详细描述这几种方式，并讨论它们的优缺点及适用场景。

一、使用 window.scrollY

window.scrollY 是一个只读属性，返回文档在垂直方向上已滚动的像素值。这个属性是现代浏览器中获取滚动条位置的推荐方式，因为它简单直观，且支持性较好。

const scrollTop = window.scrollY;

console.log('滚动条距离顶部的距离为：', scrollTop);

优点

1. 简单易用：无需复杂的代码，直接获取滚动条距离顶部的距离。
2. 广泛支持：现代浏览器均支持此属性，兼容性较好。

适用场景

适用于大多数现代浏览器环境下的网页开发。如果需要兼容旧版本浏览器，可以考虑其他方法。

二、使用 document.documentElement.scrollTop

document.documentElement.scrollTop 返回或设置文档在垂直方向上已滚动的像素值。该属性主要用于兼容旧版本浏览器，特别是IE。

const scrollTop = document.documentElement.scrollTop;

console.log('滚动条距离顶部的距离为：', scrollTop);

优点

1. 兼容性好：在旧版本浏览器中表现良好，特别是IE浏览器。
2. 可读可写：不仅可以读取，还可以设置滚动条的位置。

适用场景

适用于需要兼容旧版本浏览器的网页开发，特别是在IE浏览器中表现更为稳定。

三、使用 document.body.scrollTop

document.body.scrollTop 同样返回或设置文档在垂直方向上已滚动的像素值。这个属性早期用于获取滚动条的位置，但在现代浏览器中已逐渐被淘汰。

const scrollTop = document.body.scrollTop;

console.log('滚动条距离顶部的距离为：', scrollTop);

优点

1. 历史遗留：在非常旧的浏览器中可能会用到。

缺点

1. 不推荐使用：现代浏览器中已逐渐被淘汰，兼容性较差。

适用场景

仅在非常旧的浏览器中使用，现代开发中应尽量避免使用。

四、综合使用

为了确保代码在各种浏览器中表现良好，可以综合使用以上几种方法。以下是一个通用的解决方案：

function getScrollTop() {

  return window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0;
}
const scrollTop = getScrollTop();
console.log('滚动条距离顶部的距离为：', scrollTop);

优点

1. 兼容性最优：综合使用多种方法，确保在各种浏览器中都能正常工作。
2. 稳健性高：即使某一种方法失效，仍有其他方法作为备用。

适用场景

适用于需要兼容各种浏览器，特别是一些旧版本浏览器的网页开发。

五、实际应用场景

1、懒加载图片

在长页面中，用户滚动到某个位置时再加载图片，可以提高页面加载速度和用户体验。

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

  const scrollTop = getScrollTop();
  const images = document.querySelectorAll('img[data-src]');
  images.forEach(img => {
    if (img.offsetTop < window.innerHeight + scrollTop) {
      img.src = img.getAttribute('data-src');
      img.removeAttribute('data-src');
    }
  });
});

2、返回顶部按钮

在用户滚动一定距离后，显示一个返回顶部的按钮，点击按钮可以快速回到页面顶部。

const backToTopButton = document.querySelector('.back-to-top');

window.addEventListener('scroll', function() {
  const scrollTop = getScrollTop();
  if (scrollTop > 300) {
    backToTopButton.style.display = 'block';
  } else {
    backToTopButton.style.display = 'none';
  }
});
backToTopButton.addEventListener('click', function() {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});

3、动态导航高亮

在用户滚动页面时，根据当前位置动态高亮导航菜单中的对应项。

const sections = document.querySelectorAll('section');

const navLinks = document.querySelectorAll('nav a');
window.addEventListener('scroll', function() {
  const scrollTop = getScrollTop();
  sections.forEach((section, index) => {
    if (section.offsetTop <= scrollTop && section.offsetTop + section.offsetHeight > scrollTop) {
      navLinks.forEach(link => link.classList.remove('active'));
      navLinks[index].classList.add('active');
    }
  });
});

通过以上几种方法，我们可以在网页开发中灵活地获取滚动条距离顶部的距离，并应用于各种实际场景中，从而提升用户体验和页面性能。无论是现代浏览器还是旧版本浏览器，都可以找到合适的方法来实现这一需求。

相关问答FAQs：

1. 如何使用JavaScript获取滚动条距离顶部的距离？

当页面发生滚动时，可以使用以下JavaScript代码获取滚动条距离顶部的距离：

var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

这段代码中，scrollTop变量将保存滚动条距离顶部的距离。如果浏览器支持window.pageYOffset属性，则直接使用该属性获取滚动距离；否则，使用document.documentElement.scrollTop属性获取。

2. 如何使用jQuery获取滚动条距离顶部的距离？

如果你使用jQuery库，可以使用以下代码来获取滚动条距离顶部的距离：

var scrollTop = $(window).scrollTop();

这段代码中，scrollTop变量将保存滚动条距离顶部的距离。通过$(window).scrollTop()方法可以直接获取滚动距离。

3. 如何实时监测滚动条距离顶部的变化？

如果你需要实时监测滚动条距离顶部的变化，可以使用以下代码：

$(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
    console.log(scrollTop); // 在控制台输出滚动条距离顶部的距离
});

这段代码中，$(window).scroll()方法将会在滚动事件发生时触发。在回调函数中，使用$(this).scrollTop()方法获取滚动条距离顶部的距离，并可以根据需要进行相应的操作。