# js实现列表循环滚动
> 作者/来源: UCloud 运营管理员
> 发布时间: 2022-09-15T14:25:00.000Z
> 分类: 其他
> 标签: Java
> 原文链接: http://117.50.162.249:3000/yun/articles/2542
---
# js实现列表循环滚动
> 来源: https://www.ucloud.cn/yun/127740.html
> 作者: 3403771864
> 发布日期: 发布于2022-09-15 22:25
js实现列表循环滚动如何实现？下面是具体的代码内容：
知识点：
clientHeight元素的高度
clientTop元素顶部边框的宽度
scrollTop滚动条遮挡的部分的高度（包含border）
scrollHeight整个内容的高度（包含border）
offsetTop距离上一个position不为static(默认) 的元素的顶部内边框的距离
```
列表循环滚动
let parent = document.getElementById('parent');
let child = document.getElementById('child');
let str = '';
for (let i = 0; i < 10; i++) {
str += ``;
for (let j = 0; j < 6; j++) {
str += `| 第${i}行第${j}列 | `;
}
str += `
`
}
child.innerHTML = str;
let cloneChild = document.getElementById('cloneChild');
// 深度克隆一份表格 相比 innerHTML 的优势在于可以克隆元素的全部的属性
let cloneNoe = child.cloneNode(true);
// 追加到 parent 里面 做无缝切换视觉效果
parent.appendChild(cloneNoe);
(function () {
setInterval(function () {
// parent.scrollTop + parent.clientHeight = child.scrollHeight;
// child.scrollHeight - parent.scrollTop = parent.clientHeight;
// 让他多滚动 parent 一显示区域的高度。再跳到 最顶部 ，正好 给人一种在不断滚动的错觉
if (parent.scrollTop >= child.scrollHeight) {
parent.scrollTop = 0;
} else {
parent.scrollTop++;
}
}, 20);
})()
```
上述就是全部内容，请大家多多关注后续更多精彩内容。