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

Posted 2020-10-04 造轮子

滚动条没有实际的高度。只是为了呈现效果才在外型上面有长度。

在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");
　　}
});

　

代码测试有效果。