html实现⾃动滚动,js实现滚动条⾃动滚动本⽂实例为⼤家分享了js实现滚动条⾃动滚动的具体代码，供⼤家参考，具体内容如下
效果类似于直播⽹站的评论，会⼀条接着⼀条向上 go out ；
js部分很简单：通过控制scrolltop的值来实现⾃动滚动效果；
很重要两点：
1、scrolltop的值不可以加单位，谨记！
2、⽹页缩放⽐例会影响效果实现(下⾯具体说)；
scrolltop需要注意的三点：
1、如果这个元素没有被溢出，scrolltop为0；
2、设置的scrolltop值⼩于0，则scrolltop的值为0
3、如果设置scrolltop的值超出了这个容器滚动的值，则scrolltop的值为容器最⼤值
js部分：
(function () {
// 获取⽗盒⼦(肯定有滚动条)
var parent = lementbyid('parent');
// 获取⼦盒⼦(⾼度肯定⽐⽗盒⼦⼤)
var child1 = lementbyid('child1');
var child2 = lementbyid('child2');
// 第⼀个⼦盒⼦内容复制⼀遍给第⼆个⼦盒⼦，产⽣循环视觉，辅助作⽤
// 可以注释下这条代码，看会出现什么情况
child2.innerhtml = child1.innerhtml;
// 设置定时器，时间即为滚动速度
setinterval(function () {js控制滚动条
if(parent.scrolltop >= child1.scrollheight) {
parent.scrolltop = 0;
} else {
// 如果存在⽹页缩放，很有可能没有效果，但是else部分的代码会执⾏
// 原因：刚才讲到的scrolltop三个注意中标黄的⼀条
// 设置scrolltop的值⼩于0，即scrolltop被设为0
// 可以缩放跑⼀下，然后不刷新的状态下恢复百分之百跑⼀下，再缩放，打印scrolltop的值
// 你会发现正常尺⼨执⾏时打印的第⼀个值不是加法，⽽是减法，即scrolltop++增加负值
// 这样的话就对应上了scrolltop的注意点了，增加的值⼩于0，就被设为0
parent.scrolltop++;
}
}, 20);
})()
下⾯是完整demo，拉⾛直接看效果
autoscroll
.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;
}
12345
(function () {
var parent = lementbyid('parent');
var child1 = lementbyid('child1');
var child2 = lementbyid('child2');
child2.innerhtml = child1.innerhtml;
setinterval(function () {
if(parent.scrolltop >= child1.scrollheight) {
parent.scrolltop = 0;
} else {
parent.scrolltop++;
}
}, 20);
})()
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持萬仟⽹。

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