jquery+原生JS实现动态列表无缝滚动(封装方法)
// 定义动态列表滚动的函数
function dynamicListScroll(selector, scrollAmount, scrollInterval) {
// 获取列表元素
const list = document.querySelector(selector);
if (!list) {
console.error('No element found for selector:', selector);
return;
}
// 滚动函数
function scrollList() {
// 检查是否需要滚动
if (list.scrollTop >= list.scrollHeight - list.clientHeight) {
list.scrollTop = 0;
} else {
list.scrollTop += scrollAmount;
}
}
// 设置滚动间隔
setInterval(scrollList, scrollInterval);
}
// 使用方法
// 假设有一个id为'scroll-list'的无限滚动列表
// 每次滚动10像素,每200毫秒滚动一次
dynamicListScroll('#scroll-list', 10, 200);
这段代码定义了一个dynamicListScroll
函数,它接受三个参数:selector
是列表的CSS选择器,scrollAmount
是每次滚动的像素数,scrollInterval
是滚动间隔的毫秒数。函数内部通过querySelector
获取列表元素,并根据传入的滚动量和间隔进行滚动。如果列表滚动到底部,它会重置滚动位置到顶部,实现无缝滚动的效果。
评论已关闭