offsetHeight:包括padding、border、水平滚动条,对于inline的元素这个属性一直是0px
clientHeight:包括padding,对于inline的元素这个属性一直是0px
scrollHeight代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是clientHeight,也就是scrollHeight>=clientHeight恒成立
scrollTop: 代表在有滚动条时,滚动条向下滚动的距离,也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立
offsetTop: 当前元素顶部 距离最近父元素顶部 的距离,和有没有滚动条没有关系
网页可见区域高:document.body.clientHeight
网页正文(可见+不可见)全文高:document.body.scrollHeight
网页可见区域高(包括border的高):document.body.offsetHeight
//监听滚动事件
window.onscroll = function () {
// 获取滚动的内容实际高度(包括超出可视窗的溢出部分)
var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
//获取滚动条滚动的距离
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
//获取窗口可视范围高度
var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight, document.body.clientHeight);
// 可视窗口高度加上滚动的距离大于或者等于的总内容高度的时候触发
if (clientHeight + scrollTop >= scrollHeight) {
console.log("下一次加载请求");
}
}