快捷導(dǎo)航

js實(shí)現(xiàn)列表循環(huán)滾動(dòng)

更新時(shí)間：2022年07月14日 14:10:21 作者：葉林染

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)列表循環(huán)滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)列表循環(huán)滾動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下

先介紹幾個(gè)屬性

clientHeight 元素的高度
clientTop 元素頂部邊框的寬度
scrollTop 滾動(dòng)條遮擋的部分的高度（包含border）
scrollHeight 整個(gè)內(nèi)容的高度（包含border）
offsetTop 距離上一個(gè) position 不為 static(默認(rèn)) 的元素的頂部?jī)?nèi)邊框的距離

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

<head>
? ? <meta charset="UTF-8" />
? ? <title>列表循環(huán)滾動(dòng)</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)勢(shì)在于可以克隆元素的全部的屬性
? ? ? ? let cloneNoe = child.cloneNode(true);
? ? ? ? // 追加到 parent 里面 做無(wú)縫切換視覺(jué)效果
? ? ? ? parent.appendChild(cloneNoe);

? ? ? ? (function () {
? ? ? ? ? ? setInterval(function () {
? ? ? ? ? ? ? ? // parent.scrollTop + parent.clientHeight = child.scrollHeight;
? ? ? ? ? ? ? ? // child.scrollHeight - parent.scrollTop = parent.clientHeight;
? ? ? ? ? ? ? ? // 讓他多滾動(dòng) parent 一顯示區(qū)域的高度。再跳到 最頂部 ，正好 給人一種在不斷滾動(dòng)的錯(cuò)覺(jué)
? ? ? ? ? ? ? ? if (parent.scrollTop >= child.scrollHeight) {
? ? ? ? ? ? ? ? ? ? parent.scrollTop = 0;
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? parent.scrollTop++;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }, 20);
? ? ? ? })()

? ? </script>
</body>

</html>