使用js的scrollTop()方法实现此功能
需要在父div下包两个子div。一个显示当前数据；一个留白，为滚动做准备
<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>
样式如下：
.parent {
300px;
height: 200px;
margin: 0 auto;
background: #242424;
overflow-y: scroll;
}
/*设置的子盒子高度大于父盒子，产生溢出效果*/
.child {
height: auto;
}
.child li {
height: 50px;
margin: 2px 0;
background: #009678;
}
使用scrollTop()方法配合定时器完成，速度可以通过定时器的时间来调节
(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);
})()
完整代码如下：
<!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; } /*设置的子盒子高度大于父盒子，产生溢出效果*/ .child { height: auto; } .child li { height: 50px; margin: 2px 0; background: #009678; } </style> <body> <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> <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>