JavaScript中获取滚动条高度的多种方法详解

一、直接获取滚动条高度

window.pageYOffset
document.documentElement.scrollTop || document.body.scrollTop

可以直接通过window.pageYOffset或document.documentElement.scrollTop || document.body.scrollTop获取页面滚动条在Y轴上的滚动距离（单位为像素），这两个属性均可兼容大多数主流浏览器。

代码示例：

var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
console.log('滚动高度：' + scrollHeight);

二、jQuery获取滚动条高度

$(window).scrollTop()

使用jQuery框架也可以轻松获取滚动条高度，只需要调用$(window).scrollTop()即可返回滚动条在Y轴上的滚动距离（单位为像素）。

代码示例：

var scrollHeight = $(window).scrollTop();
console.log('滚动高度：' + scrollHeight);

三、滚动事件获取滚动条高度

document.addEventListener('scroll', function(){
  console.log('滚动高度：' + window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop);
})

通过监听滚动事件，实时获取滚动条的高度，可以提高用户体验。

代码示例：

document.addEventListener('scroll', function(){
  var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  console.log('滚动高度：' + scrollHeight);
});

四、节流优化滚动条高度获取

function throttle (fn, delay) {
  let last;
  return function () {
    const context = this;
    const args = arguments;
    const now = +new Date();
    if (!last || now > last + delay) {
      fn.apply(context, args);
      last = now;
    }
  }
}

document.addEventListener('scroll', throttle(function(){
  var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  console.log('滚动高度：' + scrollHeight);
}, 300));

如果在滚动事件中直接写获取滚动条高度的代码，会造成事件的频繁触发，造成页面卡顿。为了优化性能，可以对滚动事件进行节流，控制事件的触发间隔，提高用户体验。

代码示例：

function throttle (fn, delay) {
  let last;
  return function () {
    const context = this;
    const args = arguments;
    const now = +new Date();
    if (!last || now > last + delay) {
      fn.apply(context, args);
      last = now;
    }
  }
}

document.addEventListener('scroll', throttle(function(){
  var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  console.log('滚动高度：' + scrollHeight);
}, 300));

五、滚动到底部加载更多

document.addEventListener('scroll', throttle(function(){
  var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  var pageHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  if (scrollHeight + window.innerHeight >= pageHeight) {
    console.log('已滚动到页面底部，执行加载更多操作');
  }
}, 300));

在一些需要加载更多数据的场景中，可以通过监听滚动事件判断滚动条是否到达页面底部，从而自动触发加载更多的操作。

代码示例：

document.addEventListener('scroll', throttle(function(){
  var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  var pageHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  if (scrollHeight + window.innerHeight >= pageHeight) {
    console.log('已滚动到页面底部，执行加载更多操作');
  }
}, 300));

六、总结

本文介绍了JavaScript中获取滚动条高度的多种方法，包括直接获取滚动条高度、jQuery获取滚动条高度、滚动事件获取滚动条高度、节流优化滚动条高度获取和滚动到底部加载更多等方面。无论是在滚动监测、懒加载、无限加载还是制作瀑布流等方面都是必不可少的技术。开发者可根据项目需求选择合适的方法，提高网页加载速度和用户体验。