原生js判断页面是否触底

最新推荐文章于 2023-09-08 18:14:14 发布

liukai6

最新推荐文章于 2023-09-08 18:14:14 发布

阅读量3.5k

点赞数 1

分类专栏： js 前端

本文链接：https://blog.csdn.net/liukai6/article/details/81183479

版权

前端同时被 2 个专栏收录

101 篇文章 1 订阅

订阅专栏

78 篇文章 1 订阅

订阅专栏

   //滚动条在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()){
                var more = document.getElementById('more');
                more.style.display = "none";
            } else {
                var more = document.getElementById('more');
                more.style.display = "block";
            }
        };