无缝上下滚动

最新推荐文章于 2022-10-16 11:45:00 发布

qq_35285268

最新推荐文章于 2022-10-16 11:45:00 发布

阅读量251

点赞数

本文链接：https://blog.csdn.net/qq_35285268/article/details/58597140

版权

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
line-height: 30px;
}
#box{
width:200px;
margin:50px auto;
text-align:center;
height:200px;
background:pink;
border: 1px solid green;
}
#wrap{
height:200px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="box">
<div id="wrap">
<ul id="ul1">
<li>啦啦啦啦啦111111111</li>
<li>啦啦啦啦啦222222222</li>
<li>啦啦啦啦啦3333333</li>
<li>啦啦啦啦啦44444444444</li>
<li>啦啦啦啦啦555555555</li>
<li>啦啦啦啦啦666666666666</li>
</ul>
<ul>
<li>2啦啦啦啦啦111111111</li>
<li>2啦啦啦啦啦222222222</li>
<li>2啦啦啦啦啦3333333</li>
<li>2啦啦啦啦啦44444444444</li>
<li>2啦啦啦啦啦555555555</li>
<li>2啦啦啦啦啦666666666666</li>
</ul>
</div>
</div>
<script>
var box = document.getElementById('box');
var ul1 = document.getElementById('ul1');
var wrap = document.getElementById('wrap');
var ulW = ul1.offsetHeight;
var timer = setInterval(function(){
wrap.scrollTop++;
if(wrap.scrollTop>ulW){
wrap.scrollTop = 0;
}
},10);
</script>
</body>
</html>