js实现列表循环滚动
作者：叶林染
这篇文章主要为大家详细介绍了js实现列表循环滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现列表循环滚动的具体代码，供大家参考，具体内容如下
先介绍几个属性
clientHeight元素的高度clientTop元素顶部边框的宽度scrollTop滚动条遮挡的部分的高度（包含border）scrollHeight整个内容的高度（包含border）offsetTop距离上一个position不为static(默认) 的元素的顶部内边框的距离
<!DOCTYPE html>
<html lang="en">
<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" class="parent">
<table border="1" cellpadding="18" cellspacing="0" id="child" class="child">
</table>
<div id="cloneChild" class="child"></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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。