js实现列表循环滚动
AI 摘要 / TL;DR
js实现列表循环滚动如何实现？下面是具体的代码内容： 知识点： clientHeight元素的高度 clientTop元素顶部边框的宽度 scrollTop滚动条遮挡的部分的高度（包含border） scrollHeight整个内容的高度（包含border） offsetTop距离上一个position不为static
来源: https://www.ucloud.cn/yun/127740.html 作者: 3403771864 发布日期: 发布于2022-09-15 22:25
js实现列表循环滚动如何实现？下面是具体的代码内容：
知识点：
clientHeight元素的高度
clientTop元素顶部边框的宽度
scrollTop滚动条遮挡的部分的高度（包含border）
scrollHeight整个内容的高度（包含border）
offsetTop距离上一个position不为static(默认) 的元素的顶部内边框的距离
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>列表循环滚动</title>
</head>
<style>
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
background-color: #999;
}
.parent {
width: 728px;
margin: 200px auto;
height: 200px;
overflow: hidden;
background-color: #fff;
}
</style>
<body>
<div id="parent">
<table border="1" cellpadding="18" cellspacing="0" id="child">
</table>
<div id="cloneChild"></div>
</div>
<script type="text/javascript">
let parent = document.getElementById('parent');
let child = document.getElementById('child');
let str = '';
for (let i = 0; i < 10; i++) {
str += `<tr>`;
for (let j = 0; j < 6; j++) {
str += `<td>第${i}行第${j}列</td>`;
}
str += `</tr>`
}
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);
})()
</script>
</body>
</html>
上述就是全部内容，请大家多多关注后续更多精彩内容。