原生js实现下拉到底事件

小咪咪 2022-08-21 11:41 182阅读 0赞

1.获取三个高度页面滚动距离、文档总高度、浏览器视口高度

![复制代码][copycode.gif]

//滚动条在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;
    }

![复制代码][copycode.gif]

2. 页面滚动至视口高度+页面Y轴滚动距离大于文档总高度 - 20px时触发ajax事件

window.onscroll = function() {　　
        if (getScrollTop() + getWindowHeight() >= getScrollHeight() - 20) {

loadAjax();

} };

[copycode.gif]: /images/20220724/b4a85bdb724e4ee985dbcd587650ddec.png