js实现列表在垂直⽅向上循环滚动使⽤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 {
width: 300px;
height: 200px;
margin: 0 auto;
background: #242424;
overflow-y: scroll;
}
/*设置的⼦盒⼦⾼度⼤于⽗盒⼦，产⽣溢出效果*/
.child {
html滚动效果代码
height: auto;
}
.child li {
height: 50px;
margin: 2px 0;
background: #009678;
}
使⽤scrollTop()⽅法配合定时器完成，速度可以通过定时器的时间来调节
(function () {
var parent = ElementById('parent');
var child1 = ElementById('child1');
var child2 = ElementById('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 = ElementById('parent');
var child1 = ElementById('child1');
var child2 = ElementById('child2');            child2.innerHTML = child1.innerHTML;
setInterval(function () {
if(parent.scrollTop >= child1.scrollHeight) {
parent.scrollTop = 0;
} else {
parent.scrollTop++;
}
}, 20);
})()
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。