js實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾動(dòng)
本文實(shí)例為大家分享了js實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下
效果類(lèi)似于直播網(wǎng)站的評(píng)論，會(huì)一條接著一條向上 go out ；
js部分很簡(jiǎn)單：通過(guò)控制scrollTop的值來(lái)實(shí)現(xiàn)自動(dòng)滾動(dòng)效果；
很重要兩點(diǎn)：
1、scrollTop的值不可以加單位，謹(jǐn)記！
2、網(wǎng)頁(yè)縮放比例會(huì)影響效果實(shí)現(xiàn)（下面具體說(shuō)）；
scrollTop需要注意的三點(diǎn)：
1、如果這個(gè)元素沒(méi)有被溢出，scrollTop為0；
2、設(shè)置的scrollTop值小于0，則scrollTop的值為0
3、如果設(shè)置scrollTop的值超出了這個(gè)容器滾動(dòng)的值，則scrollTop的值為容器最大值
js部分：
(function () { // 獲取父盒子（肯定有滾動(dòng)條） var parent = document.getElementById(’parent’); // 獲取子盒子（高度肯定比父盒子大） var child1 = document.getElementById(’child1’); var child2 = document.getElementById(’child2’); // 第一個(gè)子盒子內(nèi)容復(fù)制一遍給第二個(gè)子盒子，產(chǎn)生循環(huán)視覺(jué)，輔助作用 // 可以注釋下這條代碼，看會(huì)出現(xiàn)什么情況 child2.innerHTML = child1.innerHTML; // 設(shè)置定時(shí)器，時(shí)間即為滾動(dòng)速度 setInterval(function () { if(parent.scrollTop >= child1.scrollHeight) { parent.scrollTop = 0; } else { // 如果存在網(wǎng)頁(yè)縮放，很有可能沒(méi)有效果，但是else部分的代碼會(huì)執(zhí)行 // 原因：剛才講到的scrollTop三個(gè)注意中標(biāo)黃的一條 // 設(shè)置scrollTop的值小于0，即scrollTop被設(shè)為0 // 可以縮放跑一下，然后不刷新的狀態(tài)下恢復(fù)百分之百跑一下，再縮放，打印scrollTop的值 // 你會(huì)發(fā)現(xiàn)正常尺寸執(zhí)行時(shí)打印的第一個(gè)值不是加法，而是減法，即scrollTop++增加負(fù)值 // 這樣的話就對(duì)應(yīng)上了scrollTop的注意點(diǎn)了，增加的值小于0，就被設(shè)為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; } /*設(shè)置的子盒子高度大于父盒子，產(chǎn)生溢出效果*/ .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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 關(guān)于html嵌入xml數(shù)據(jù)島如何穿過(guò)樹(shù)形結(jié)構(gòu)關(guān)系的問(wèn)題2. XPath入門(mén) - XSL教程 - 33. XML 非法字符（轉(zhuǎn)義字符）4. el-input無(wú)法輸入的問(wèn)題和表單驗(yàn)證失敗問(wèn)題解決5. .NET Framework各版本(.NET2.0 3.0 3.5 4.0)區(qū)別6. CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)7. 不要在HTML中濫用div8. vue實(shí)現(xiàn)復(fù)制文字復(fù)制圖片實(shí)例詳解9. XML入門(mén)的常見(jiàn)問(wèn)題(三)10. 前端html+css實(shí)現(xiàn)動(dòng)態(tài)生日快樂(lè)代碼
網(wǎng)公網(wǎng)安備