Js 监听滚动触底加载更多_浏览器滚动触底加载更多

一、Js 监听滚动触底加载更多_浏览器滚动触底加载更多

滚动监听原理：

监听浏览器滚动 scroll, 当滚动条滚动高度+可视高度 >= 文档高度 时候触发

//触底加载更多
function loadMore() {
    alert('到底了');
    console.error('滚动到最低了');
}
//监听浏览器滚动 scroll, 当滚动高度+可视高度 >= 文档高度 时候触发
document.addEventListener('scroll', function (e) {
    var scrollTop = getScrollTop();
    var winHeight = getWindowHeight();
    var docHeight = getDocumentHeight();
    //console.info(`滚动高度：${scrollTop} 可视高度：${winHeight} 文档高度：${docHeight}`);
    if ((scrollTop + winHeight) >= docHeight) {
        //由于滚动条不问，注意处理重复触底问题
        loadMore();
    }
}, false);

//获取页面高度
function getDocumentHeight() {
    //现代浏览器（IE9+和其他浏览器）和IE8的document.body.scrollHeight和document.documentElement.scrollHeight都可以
    return Math.max(document.body.scrollHeight, document.d