一、直接获取滚动条高度
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获取滚动条高度、滚动事件获取滚动条高度、节流优化滚动条高度获取和滚动到底部加载更多等方面。无论是在滚动监测、懒加载、无限加载还是制作瀑布流等方面都是必不可少的技术。开发者可根据项目需求选择合适的方法，提高网页加载速度和用户体验。
原创文章，作者：JJMMD，如若转载，请注明出处：https://www.506064.com/n/372982.html
微信扫一扫 
支付宝扫一扫 