實現(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ū)別,第一種是比較連貫,第二種方法,中間會有間斷,效果不是特別好。