js實現(xiàn)滾動條自動滾動
更新時間：2020年12月13日 10:35:20 作者：一只安和
這篇文章主要為大家詳細介紹了js實現(xiàn)滾動條自動滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)滾動條自動滾動的具體代碼，供大家參考，具體內容如下
效果類似于直播網站的評論，會一條接著一條向上 go out ；
js部分很簡單：通過控制scrollTop的值來實現(xiàn)自動滾動效果；
很重要兩點：
1、scrollTop的值不可以加單位，謹記！
2、網頁縮放比例會影響效果實現(xiàn)（下面具體說）；
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');
// 第一個子盒子內容復制一遍給第二個子盒子，產生循環(huán)視覺，輔助作用
// 可以注釋下這條代碼，看會出現(xiàn)什么情況
child2.innerHTML = child1.innerHTML;
// 設置定時器，時間即為滾動速度
setInterval(function () {
if(parent.scrollTop >= child1.scrollHeight) {
parent.scrollTop = 0;
} else {
// 如果存在網頁縮放，很有可能沒有效果，但是else部分的代碼會執(zhí)行
// 原因：剛才講到的scrollTop三個注意中標黃的一條
// 設置scrollTop的值小于0，即scrollTop被設為0
// 可以縮放跑一下，然后不刷新的狀態(tài)下恢復百分之百跑一下，再縮放，打印scrollTop的值
// 你會發(fā)現(xiàn)正常尺寸執(zhí)行時打印的第一個值不是加法，而是減法，即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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章介紹了js同比例縮放圖片的小例子，有需要的朋友可以參考一下2013-10-10
微信小程序實現(xiàn)的動態(tài)設置導航欄標題功能示例
這篇文章主要介紹了微信小程序實現(xiàn)的動態(tài)設置導航欄標題功能,結合實例形式分析了微信小程序使用wx.setNavigationBarTitle接口動態(tài)設置導航欄標題的相關操作技巧,需要的朋友可以參考下2019-01-01
用js+csss實現(xiàn)的一個帶復選框的下拉框，用到了很基礎的技術，但是比較實用，喜歡的朋友可以參考下2014-09-09
移動端使用localStorage緩存Js和css文的方法(web開發(fā))
這篇文章主要介紹了web移動端使用localStorage緩存Js和css文的方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
深入認識JavaScript中的函數...2007-01-01
這篇文章主要給大家介紹了如何通過一篇文章快速從零快速上手Rollup的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
什么是Node.js?還服務器端javascript?對于這個概念我在這篇文章不做解釋，可以自己去搜索了解下，服務器端js不是新技術，只是最近的node.js的火爆讓他爆發(fā)了，我會在以后的文章里解釋什么是node.js2012-05-05
這篇文章主要為大家詳細介紹了d3.js實現(xiàn)圖形拖拽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要介紹了JS實現(xiàn)頁面加載完成之后自動刷新一次問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
在現(xiàn)代 Web 開發(fā)中,JavaScript 提供了多種方法來與瀏覽器窗口進行交互,包括最大化和最小化瀏覽器窗口,雖然瀏覽器通常會限制對窗口尺寸的直接控制,但我們依然可以實現(xiàn)一些常見的行為,本文將探討如何使用 JavaScript 實現(xiàn)窗口的最大化和最小化效果2024-12-12