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

天马3798

于 2022-06-11 16:44:13 发布

阅读量1.3k

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 css3 Js 监听滚动触底加载更多浏览器滚动触底加载更多

本文链接：https://blog.csdn.net/u011127019/article/details/125235896

版权

JavaScript 专栏收录该内容

56 篇文章 9 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文主要介绍了JavaScript如何监听滚动到底部并实现加载更多功能，讲解了滚动监听的原理和封装使用方法。同时，还涉及到Js中slice和splice数组操作的详解，帮助理解这两种数组操作的区别和用法。

摘要由CSDN通过智能技术生成

一、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);

//获取页面高度
fun