html代码
<body>
<div class="level1">
<div class="parent" id="parent">
<div class="scroll-one" id="scroll-one">
<ul>
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第5行</li>
<li>第6行</li>
<li>第7行</li>
<li>第8行</li>
</ul>
</div>
<div class="scroll-two">
<ul>
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第5行</li>
<li>第6行</li>
<li>第7行</li>
<li>第8行</li>
</ul>
</div>
</div>
</div>
</body>
css代码
.level1 {
width: 1000px;
height: 500px;
border: red 1px solid;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.parent {
width: 50%;
height: 50%;
background-color: aqua;
overflow: hidden; /*必须*/
}
ul li {
height: 30px;
list-style: none;
}
注意：父级元素必须设置为
overflow: hidden;
Js代码
<script>
var init = function () {
var parent = document.getElementById("parent");
var scrollone = document.getElementById("scroll-one");
console.log(parent.scrollTop)
console.log(scrollone.offsetHeight)
setInterval(function () {
if (parent.scrollTop > scrollone.offsetHeight) {
parent.scrollTop = 0;
} else {
parent.scrollTop++;
}
}, 100);
}
init();
</script>
根据父级元素的scrollTop值和子元素的offsetHeight值来改变父元素的scrollTop,以实现滚动效果。
注意：
浏览器的滚轮缩放网页大小会影响到滚动的效果，可以调节 parent.scrollTop++;以达到合适的滚动速度
版权声明：本文为qq_41251187原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。