简单列表滚动通用

段皓是我呀

于 2022-05-19 19:40:47 发布

阅读量244

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html5

本文链接：https://blog.youkuaiyun.com/weixin_45664416/article/details/124869960

版权

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

该博客介绍了一个JavaScript函数`ScrollList`，用于监听滚动事件并自动触发加载更多内容。函数接受可滚动DOM元素、定时器延迟时间和是否循环加载作为参数。当元素滚动到底部时，会触发一个事件以请求更多数据。同时，它还处理了鼠标移入和移出事件以控制定时器的开启和关闭。这个功能对于无限滚动列表或动态加载内容的页面非常有用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可以自己加一些参数（滚动距离，是否循环加载，到底部时可以弹出一个事件进行请求等等）
如果假如异步请求记得关闭定时器


/**
 * 
 * @param {传入可滚动的真实dom} dom  
 * @param {定时器延时} time 
 * @param {是否循环} loop 
 * @param {滚动距离} loop 
 */
function ScrollList(dom, time = 100, loop = true) {
    const copyDom = dom;
    let timeCo = null;
    if (!copyDom) {
        return false
    }
    // 创建定时器开始滚动元素
    function CreatedTime() {
        timeCo = setInterval(() => {
            // 元素⾃增距离顶部1像素
            copyDom.scrollTop += 1;
            // 判断元素是否滚动到底部(可视⾼度+距离顶部=整个⾼度)
            if (copyDom.clientHeight + copyDom.scrollTop == copyDom.scrollHeight) {
                // 重置table距离顶部距离
                copyDom.scrollTop = 0;
            }
        }, time);
    }
    CreatedTime()
    // 移入事件
    copyDom.addEventListener("mouseover",function(){
        clearInterval(timeCo)
    })
    // 移出事件
    copyDom.addEventListener("mouseout",function(){
        CreatedTime()
    })
}
export {
    ScrollList
}