實(shí)現(xiàn)頁(yè)面滾動(dòng)條自動(dòng)滾動(dòng)功能,有兩種方法:
結(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
還有一種比較簡(jiǎn)單的方法,直接使用標(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è)置移動(dòng)的速度,一般為1金刁,2;
scrolldelay是該時(shí)間以什么為參數(shù)织咧;
兩種方法的效果也有一定的區(qū)別胀葱,第一種是比較連貫漠秋,第二種方法笙蒙,中間會(huì)有間斷,效果不是特別好庆锦。