實現(xiàn)滾動條自動滾動效果的兩種方法

實現(xiàn)頁面滾動條自動滾動功能,有兩種方法:

結(jié)合js方式,scrollTop

html

<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>?

css樣式為

.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; }?

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 {parent.scrollTop++; }

},

20); })()?

以上代碼轉(zhuǎn)自https://blog.csdn.net/amdd9582/article/details/87738821

還有一種比較簡單的方法,直接使用標(biāo)簽的方式:

<div id="child1" class="child">

<marquee style=" HEIGHT: 200px;" scrollamount="2" direction="up" Align="Middle" > <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li>

</marquee>

</div>

scrollamount設(shè)置移動的速度,一般為1,2;

scrolldelay是該時間以什么為參數(shù);

兩種方法的效果也有一定的區(qū)別,第一種是比較連貫,第二種方法,中間會有間斷,效果不是特別好。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容