通过jquery判断页面是否滚动到了底部-青岛软件培训-Java培训-Python培训学校-万码学堂

2022-10-25 11:10

通过jquery判断页面是否滚动到了底部

少尉

WEB前端

(482)

(0)

1)滚动条到顶部的位置：scrollTop

(2)当前窗口内容可视区：clientHeight

(3)可见内容区加上滚动条不可见内容区的总高度：scrollHeight

滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。

但是经测试发现scrollTop + clientHeight会比scrollHeight(滚动条总高度小0.5左右)

所以我们把判断滚动条到底的条件改为scrollHeight - (scrollTop + windowHeight) < 1即可

实现代码：

$(function (){
   window.onscroll=function (){
   console.log(document.documentElement.scrollHeight-document.documentElement.scrollTop);
      console.log(document.documentElement.clientHeight);
      if(document.documentElement.scrollHeight-document.documentElement.scrollTop-document.documentElement.clientHeight<1){
         console.log("到底了");
      }
   }
});