首页>>软件资讯 >>列表

jQuery实现判断_滚动条到底部

2021-05-04 12:07:13 字号:

  这篇文章主要介绍了jQuery实现判断滚动条到底部的相关资料,需要的朋友可以参考下

  判断滚动条到底部,需要用到DOM的

第一放映室[www.aikan.tv/special/diyifangyingshi/]三个属性值,即scrollTop、clientHeight、scrollHeight。

  scrollTop为滚动条在Y轴上的滚动距离。

  clientHeight为内容可视区域的高度。

  scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。

  从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。

  废话不多少说,赶紧上代码(兼容不同的浏览器)。

lazyload.js

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40  //滚动条在Y轴上的滚动距离 function getScrollTop(){   var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;   if(document.body){     bodyScrollTop = document.body.scrollTop;   }   if(document.documentElement){     documentScrollTop = document.documentElement.scrollTop;   }   scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;   return scrollTop; } //文档的总高度 function getScrollHeight(){   var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;   if(document.body){     bodyScrollHeight = document.body.scrollHeight;   }   if(document.documentElement){     documentScrollHeight = document.documentElement.scrollHeight;   }   scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;   return scrollHeight; } //浏览器视口的高度 function getWindowHeight(){   var windowHeight = 0;   if(document.compatMode == "CSS1Compat"){     windowHeight = document.documentElement.clientHeight;   }else{     windowHeight = document.body.clientHeight;   }   return windowHeight; } window.onscroll = function(){   if(getScrollTop() + getWindowHeight() == getScrollHeight()){     alert("you are in the bottom!");   } };
北京租屋 http://www.c21.com.cn/