知识点:整个doucument而言如果判断滚动条滚动到底部

Posted 造轮子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了知识点:整个doucument而言如果判断滚动条滚动到底部相关的知识,希望对你有一定的参考价值。

滚动条没有实际的高度。只是为了呈现效果才在外型上面有长度。
在js当中也没有提供滚动条的高度API。
参考了网上有关资料:判断滚动条到底部的基本逻辑是滚动条滚动的高度加上视口的高度,正好是document的高度,公式表示为
滚动条滚动的高度+浏览器视口的高度>=document的高度。
参考网上资料,具体代码如下:
//滚动条在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;
        windowHeight = document.documentElement.clientHeight; 
        return windowHeight;
    }
    window.onscroll = function() {  
        if (getScrollTop() + getWindowHeight() == getScrollHeight()) {     
        	alert("you are in the bottom!");   
        }
    };
 
jquery实现代码:
$(window).scroll(function(){
  var scrollTop = $(this).scrollTop();
  var scrollHeight = $(document).height();
  var windowHeight = $(this).height();
  if(scrollTop + windowHeight == scrollHeight){
    alert("you are in the bottom");
  }
});

 

代码测试有效果。
 

以上是关于知识点:整个doucument而言如果判断滚动条滚动到底部的主要内容,如果未能解决你的问题,请参考以下文章

判断滚动条滚到页面底部并执行事件

知识点:整个div而言如果判断滚动条滚动到底部

jquery判断滚动条滚到页面底部并执行事件

如何判断滚动条滚到页面底部并执行事件

jquery如何判断滚动条滚到页面底部并执行事件

JS实现判断滚动条滚到页面底部并执行事件的方法