溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“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>
到此，相信大家對“js如何實現列表循環滾動”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
