原生JS上拉加载更多

拿来主义者,完整代码如下:

<script type="text/javascript"> 
    var flag = true; //是否还可以上拉加载 
    //获取滚动条当前的位置 
    function getScrollTop() {
        var scrollTop = 0;
        if(document.documentElement && document.documentElement.scrollTop) {
            scrollTop = document.documentElement.scrollTop; 
        } else if(document.body) { 
            scrollTop = document.body.scrollTop; 
        }     
        return scrollTop; 
    } 
    //获取当前可是范围的高度 
    function getClientHeight() {
        var clientHeight = 0; 
        if(document.body.clientHeight && document.documentElement.clientHeight) {
            clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight); 
        } else { 
            clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); 
        } 
        return clientHeight;
    } 
    //获取文档完整的高度 
    function getScrollHeight() {
        return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    } 
    window.onscroll = function() { 
        if(getScrollTop() + getClientHeight() == getScrollHeight() && flag) { //判断滚动条到达底部的条件,并自动触发下面AJAX  
                    
        } 
    } 
</script> 


div滚动到底部加载,代码如下:

<div id="testDiv" style="width: 100px;height: 100px;overflow-y: scroll;padding: 20px;border: 1px solid #ccc;"> 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
</div> 
<script type="text/javascript"> 
    var div = document.getElementById("testDiv");
    function divScroll(){ 
        var wholeHeight = div.scrollHeight; 
        var scrollTop = div.scrollTop; 
        var divHeight = div.clientHeight; 
        console.log(divHeight); 
        if(scrollTop + divHeight >= wholeHeight){
            alert('滚动到底部了');
        } 
        if(scrollTop == 0){ 
           alert('滚动到头部了');
        } 
    } 
    div.onscroll = divScroll;
</script>

发布者

cylyiou

cylyiou

分享前端知识

支付宝扫码打赏微信打赏

如果文章对您有帮助,不妨移至上方按钮小额赞助我一下,让我有动力继续写出高质量的教程。

发表评论

电子邮件地址不会被公开。