Js实现滚动加载原理(监听滚动条滚动)
原理:就是监听页⾯滚动事件,分析clientHeight、scrollTop、scrollHeight三者的属性关系。
1.documentpatMode === "CSS1Compat"模式下 ---也就是声明了DTD情况下
js控制滚动条window.addEventListener('scroll', function() {
const clientHeight = document.documentElement.clientHeight;
const scrollTop = document.documentElement.scrollTop;
const scrollHeight = document.documentElement.scrollHeight;
if (clientHeight + scrollTop >= scrollHeight) {
// 检测到滚动⾄页⾯底部,进⾏后续操作
// ...
}
}, false);
2.documentpatMode监听(完整版)
var marginBot = 0;
if (documentpatMode === "CSS1Compat"){
marginBot = document.documentElement.scrollHeight - (document.documentElement.scrollTop+document.body.scrollTop)- document.documentElement.clientHeight; } else {
marginBot = document.body.scrollHeight - document.body.scrollTop- document.body.clientHeight;
}
if(marginBot<=0) {
//do something
}
}
以上就是监听浏览器滚动条⽅式,需注意⽂档是否声明DTD
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论