js實現滾動條自動滾動
本文實例為大家分享了js實現滾動條自動滾動的具體代碼，供大家參考，具體內容如下
效果類似于直播網站的評論，會一條接著一條向上 go out ；
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 class='parent'> <div class='child'> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </div> <div 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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. springcloud alibaba nacos linux配置的詳細教程2. Vue為什么要謹慎使用$attrs與$listeners3. SpringBoot 使用 @Value 注解讀取配置文件給靜態變量賦值4. Java 生成帶Logo和文字的二維碼5. SpringBoot整合MybatisPlus的教程詳解6. 解決在Vue中使用axios POST請求變成OPTIONS的問題7. Spring Boot2發布調用REST服務實現方法8. python 實現圖片修復（可用于去水印）9. Android自定義控件實現方向盤效果10. python中的socket實現ftp客戶端和服務器收發文件及md5加密文件
網公網安備