溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
利用JavaScript怎么實現一個滾動條自動滾動功能？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
js部分很簡單：通過控制scrollTop的值來實現自動滾動效果；
很重要兩點：
1、scrollTop的值不可以加單位，謹記！
2、網頁縮放比例會影響效果實現（下面具體說）；
scrollTop需要注意的三點：
1、如果這個元素沒有被溢出，scrollTop為0；
2、設置的scrollTop值小于0，則scrollTop的值為0
3、如果設置scrollTop的值超出了這個容器滾動的值，則scrollTop的值為容器最大值
js部分：
(function () {
// 獲取父盒子（肯定有滾動條）
var parent = document.getElementById('parent');
// 獲取子盒子（高度肯定比父盒子大）
var child1 = document.getElementById('child1');
var child2 = document.getElementById('child2');
// 第一個子盒子內容復制一遍給第二個子盒子，產生循環視覺，輔助作用
// 可以注釋下這條代碼，看會出現什么情況
child2.innerHTML = child1.innerHTML;
// 設置定時器，時間即為滾動速度
setInterval(function () {
if(parent.scrollTop >= child1.scrollHeight) {
parent.scrollTop = 0;
} else {
// 如果存在網頁縮放，很有可能沒有效果，但是else部分的代碼會執行
// 原因：剛才講到的scrollTop三個注意中標黃的一條
// 設置scrollTop的值小于0，即scrollTop被設為0
// 可以縮放跑一下，然后不刷新的狀態下恢復百分之百跑一下，再縮放，打印scrollTop的值
// 你會發現正常尺寸執行時打印的第一個值不是加法，而是減法，即scrollTop++增加負值
// 這樣的話就對應上了scrollTop的注意點了，增加的值小于0，就被設為0
parent.scrollTop++;
}
}, 20);
})()下面是完整demo，拉走直接看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>autoScroll</title>
</head>
<style>
.parent {
width: 300px;
height: 200px;
margin: 0 auto;
background: #242424;
overflow-y: scroll;
}
/*設置的子盒子高度大于父盒子，產生溢出效果*/
.child {
height: auto;
}
.child li {
height: 50px;
margin: 2px 0;
background: #009678;
}
</style>
<body>
<div id="parent" class="parent">
<div id="child1" class="child">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</div>
<div id="child2" class="child"></div>
</div>
<script type="text/javascript">
(function () {
var parent = document.getElementById('parent');
var child1 = document.getElementById('child1');
var child2 = document.getElementById('child2');
child2.innerHTML = child1.innerHTML;
setInterval(function () {
if(parent.scrollTop >= child1.scrollHeight) {
parent.scrollTop = 0;
} else {
parent.scrollTop++;
}
}, 20);
})()
</script>
</body>
</html>看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
