js判断下拉到底部

2017-11-29 14:18:51 查看 1412 回复 0

阅读全文

js下拉到底部判断，经常看到前端框架上有无限下拉加载的功能。原理就是滚动条滑动到底部的判断，然后执行指定函数。

核心的代码不多就几行就可以搞定。

<!doctype html>
<html>
     <head>
     <meta charset="utf-8">
     <title>下拉滚动条滚到底部了吗？</title>
     <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
     <script language="javascript">
     $(document).ready(function (){
       var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
       var nScrollTop = 0;   //滚动到的当前位置
       var nDivHight = $("#div1").height();
       $("#div1").scroll(function(){
         nScrollHight = $(this)[0].scrollHeight;
         nScrollTop = $(this)[0].scrollTop;
         if(nScrollTop + nDivHight >= nScrollHight)
           alert("滚动条到底部了");
         });
     });
     </script>
     <body>
     <div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
       <div style="background-color:#ccc; height:750px;">IE 和 FF 下测试通过</div>
     </div>
</body>
</html>