当 clientHeight + scrollTop >= scrollHeight 时,表示已经抵达内容的底部了,可以加载更多内容。
scrollHeight:可以通过 document.documentElement.scrollHeight 、document.body.scrollHeight 获取;
clientHeight:可以通过window.innerHeight 、 document.documentElement.clientHeight 获取;
scrollTop:可以通过window.pageYOffset 、 document.documentElement.scrollTop 获取;
Window innerWidth 和 innerHeight 属性 innerheight 返回窗口的文档显示区的高度。
//滚动条
(window).height();//当前窗口的高度
var scrollTop = (document).height(); //当前文档的高度
console.log(scrollTop, windowHeight, docHeight);
// 触底公式:(滚动条滚动的高度 + 可视窗口的高度 = 文档的高度) 这个是基本的公式
if (scrollTop + windowHeight >= docHeight) {
console.log("===加载更多数据===");
}
});
//鼠标滚轮
window.addEventListener('wheel',function(e){
var scrooTop = document.body.scrollTop||document.documentElement.scrollTop
// console.log(scrooTop)
var evt = e||window.event;
// evt.preventDefault()
if(evt.deltaY > 0){
if(scrooTop>=(".pop-pc").removeClass("hide")
(document).height(); == document.documentElement.scrollHeight; // 文档内容的实际高度
(window).height(); == document.documentElement.clientHeight; // 可视窗口高度
window.onload=function(){
var a = ("#div").innerWidth(),//innerWidth()返回元素的宽高 + padding
c = ("#div").outerWidth(true);//outerWidth(true)返回元素宽高 + padding + border + margin
console.log(a,b,c,d);
}
获取浏览器显示区域(可视区域)的高度 :
(window).width();
获取页面的文档高度
(document).width();
浏览器当前窗口文档body的高度:
(document.body).width();
获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)
(document).scrollLeft();
获取或设置元素的宽度:
(obj).height();
某个元素的上边界到body最顶部的距离:obj.offset().top;(在元素的包含元素不含滚动条的情况下)
某个元素的左边界到body最左边的距离:obj.offset().left;(在元素的包含元素不含滚动条的情况下)
返回当前元素的上边界到它的包含元素的上边界的偏移量:obj.offset().top(在元素的包含元素含滚动条的情况下)
返回当前元素的左边界到它的包含元素的左边界的偏移量:obj.offset().left(在元素的包含元素含滚动条的情况下)