原生js实现下拉到底事件

最新推荐文章于 2023-11-07 13:39:12 发布

蓝色水

最新推荐文章于 2023-11-07 13:39:12 发布

阅读量2.5k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

112 篇文章

订阅专栏

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;
}

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

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

　　　　loadAjax();

 } };