js原生滚动条滚动到底部自动加载数据，js加载更多实现

之前，我爱模板网分享了Vue如何实现滚动条滚动到底部加载更多，其实，js原生和vue实现方法几乎一样，加上次的代码稍加改造，即可实现：

1、css

#box{
    width: 500px;
    height: 500px;
    overflow-y:auto;
}

2、html

<div id="box">
    <!--列表内容放在这里-->
    <!--列表内容如果一次加载不完，一定要保证初次加载时的列表总高度超过box的高度，否则不会产生滚动条-->
</div>

3、js

function addData() {
    let box = document.getElementById('box');
    // 这里用循环生成代替ajax加载数据
    for (let i = 0; i < 50; i++) {
        let span = document.createElement('span');
        span.innerHTML = 'test' + i + '<br>';
        box.appendChild(span);
    }
}
addData();
window.onscroll = function () {
    //scrollTop就是触发滚轮事件时滚轮的高度
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    console.log("滚动距离" + scrollTop);
    //变量windowHeight是可视区的高度
    var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
    console.log("可视高度" + windowHeight);
    //变量scrollHeight是滚动条的总高度
    var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    console.log("总高度" + scrollHeight);
    //判断滚动条是否到底部
    if (scrollTop + windowHeight == scrollHeight) {
        //加载数据
        console.log("距顶部" + scrollTop + "可视区高度" + windowHeight + "滚动条总高度" + scrollHeight);
        addData();
    }
}