案例：自动滚轮
2019-07-09 本文已影响2人
Hello杨先生
image.png
<style>
* {
margin: 0;
padding: 0;
}
li,
ul {
list-style: none;
}
</style>
<body>
<div style="width:400px ;height: 100px ; overflow:hidden ;background: gray ;margin: 0 auto ">
<ul>
<li style="width:400px;height: 100px;line-height:100px;background: red ;">111</li>
<li style="width:400px;height: 100px;line-height:100px;background: blue ;">222</li>
<li style="width:400px;height: 100px;line-height:100px;background: yellow ;">333</li>
<li style="width:400px;height: 100px;line-height:100px;background: green ;">444</li>
<li style="width:100px;height: 100px;background: pink ;">444</li>
<li style="width:100px;height: 100px;background: black ;">444</li>
<li style="width:100px;height: 100px;background: aqua ;">444</li>
</ul>
</div>
<script>
var MyDiv = document.getElementsByTagName("div")[0];
var myUl = document.getElementsByTagName("ul")[0];
var myLi = document.getElementsByTagName("li");
function scroll() {
if (myUl.offsetHeight - MyDiv.scrollTop <= 100){
MyDiv.scrollTop = 0;
}else{
MyDiv.scrollTop = MyDiv.scrollTop + 5;
}
console.log(MyDiv.scrollTop) ;
}
setInterval(scroll ,20);
</script>
</body>
