实现滚动条自动滚动效果的两种方法

实现页面滚动条自动滚动功能，有两种方法：

结合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; } /*设置的子盒子高度大于父盒子，产生溢出效果*/ .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); })() 

以上代码转自https://blog.csdn.net/amdd9582/article/details/87738821

还有一种比较简单的方法，直接使用标签的方式：

<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设置移动的速度，一般为1，2；

scrolldelay是该时间以什么为参数；

两种方法的效果也有一定的区别，第一种是比较连贯，第二种方法，中间会有间断，效果不是特别好。