DIV滚动条到底部判断且自动加载，到上限更多选项

最新推荐文章于 2022-07-30 12:23:51 发布

水木之风

最新推荐文章于 2022-07-30 12:23:51 发布

阅读量524

点赞数

分类专栏： js html 文章标签： javascript

本文链接：https://blog.csdn.net/baidu_33108247/article/details/50034163

版权

js 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

JS部分：

function getDivScrollHeight(){
    var dv = document.getElementsByTagName("ul").item(0);
    return dv.scrollHeight;
}

function getDivScrollTop(){
    var dv = document.getElementsByTagName("ul").item(0);
    return dv.scrollTop;
}

function getDivHeight(){
    var dv = document.getElementsByTagName("ul").item(0);
    //dv.clientHeight 不包含滚动条的区域
    return dv.style.height|window.getComputedStyle(dv,null)["height"]|dv.clientHeight;
}

//如果滚动到底部，自动加载

var counter=0;

function showMore() {
    if (counter >= 10) {
        //更多选项
        alert("More...");
        return;
    }
    var parent = document.getElementsByTagName("ul").item(0);
    var child = document.createElement("li");
    child.innerHTML = "<p>"+counter+"</p>"
    parent.appendChild(child);
    counter++;
}

//调用

document.getElementsByTagName("ul").item(0).addEventListener("scroll",function(){
        if(getDivHeight()+getDivScrollTop()==getDivScrollHeight()){
            alert("正在加载更多...");
            showMore();
        }
    });