美文网首页
滚动scroll

滚动scroll

作者: 蛋壳不讲武德 | 来源:发表于2021-01-21 10:22 被阅读0次

当 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).on("resize scroll",function() { var windowHeight =(window).height();//当前窗口的高度
var scrollTop = (window).scrollTop();//当前滚动条从上往下滚动的距离 var docHeight =(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>=(".section3").position().top+216){ console.log(1)(".pop-pc").removeClass("hide")
(".sharpop").removeClass("hide").siblings().addClass("hide") } } },{passive:false})(document).height(); == document.documentElement.scrollHeight; // 文档内容的实际高度
(window).scrollTop(); == document.documentElement.scrollTop; // 滚动条滚动高度(window).height(); == document.documentElement.clientHeight; // 可视窗口高度

window.onload=function(){
var a = ("#div").width(),//width()返回元素的宽高,不包括padding/border/margin b =("#div").innerWidth(),//innerWidth()返回元素的宽高 + padding
c = ("#div").outerWidth(),//outerWidth()返回元素的宽高 + padding + border d =("#div").outerWidth(true);//outerWidth(true)返回元素宽高 + padding + border + margin
console.log(a,b,c,d);
}

获取浏览器显示区域(可视区域)的高度 :
(window).height(); 获取浏览器显示区域(可视区域)的宽度 :(window).width();
获取页面的文档高度
(document).height(); 获取页面的文档宽度 :(document).width();
浏览器当前窗口文档body的高度:
(document.body).height(); 浏览器当前窗口文档body的宽度:(document.body).width();
获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)
(document).scrollTop(); 获取滚动条到左边的垂直宽度 :(document).scrollLeft();
获取或设置元素的宽度:
(obj).width(); 获取或设置元素的高度:(obj).height();
某个元素的上边界到body最顶部的距离:obj.offset().top;(在元素的包含元素不含滚动条的情况下)
某个元素的左边界到body最左边的距离:obj.offset().left;(在元素的包含元素不含滚动条的情况下)
返回当前元素的上边界到它的包含元素的上边界的偏移量:obj.offset().top(在元素的包含元素含滚动条的情况下)
返回当前元素的左边界到它的包含元素的左边界的偏移量:obj.offset().left(在元素的包含元素含滚动条的情况下)

相关文章

网友评论

      本文标题:滚动scroll

      本文链接:https://www.haomeiwen.com/subject/tgbrvhtx.html