<!DOCTYPE html>
<html lang="en">

<head>
? ? <meta charset="UTF-8" />
? ? <title>列表循環(huán)滾動</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 的優(yōu)勢在于可以克隆元素的全部的屬性
? ? ? ? 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 一顯示區(qū)域的高度。再跳到 最頂部 ，正好 給人一種在不斷滾動的錯覺
? ? ? ? ? ? ? ? if (parent.scrollTop >= child.scrollHeight) {
? ? ? ? ? ? ? ? ? ? parent.scrollTop = 0;
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? parent.scrollTop++;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }, 20);
? ? ? ? })()

? ? </script>
</body>

</html>