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>
<table border="1" cellpadding="18" cellspacing="0">
</table>
<div></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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。