js实现滚动条自动滚动（scrollTop）

效果类似于直播网站的评论，会一条接着一条向上 go out ；

js部分很简单：通过控制scrollTop的值来实现自动滚动效果；

很重要两点： 1、scrollTop的值不可以加单位，谨记！

2、网页缩放比例会影响效果实现（下面具体说）；

scrollTop需要注意的三点：1、如果这个元素没有被溢出，scrollTop为0；

2、设置的scrollTop值小于0，则scrollTop的值为0

3、如果设置scrollTop的值超出了这个容器滚动的值，

则scrollTop的值为容器最大值

js部分：

(function () {// 获取父盒子（肯定有滚动条）var parent = document.getElementById('parent');// 获取子盒子（高度肯定比父盒子大）var child1 = document.getElementById('child1');var child2 = document.getElementById('child2');// 第一个子盒子内容复制一遍给第二个子盒子，产生循环视觉，辅助作用// 可以注释下这条代码，看会出现什么情况child2.innerHTML = child1.innerHTML;// 设置定时器，时间即为滚动速度setInterval(function () {if(parent.scrollTop >= child1.scrollHeight) {parent.scrollTop = 0;} else {// 如果存在网页缩放，很有可能没有效果，但是else部分的代码会执行// 原因：刚才讲到的scrollTop三个注意中标黄的一条// 设置scrollTop的值小于0，即scrollTop被设为0// 可以缩放跑一下，然后不刷新的状态下恢复百分之百跑一下，再缩放，打印scrollTop的值// 你会发现正常尺寸执行时打印的第一个值不是加法，而是减法，即scrollTop++增加负值// 这样的话就对应上了scrollTop的注意点了，增加的值小于0，就被设为0parent.scrollTop++;}}, 20);
})()

下面是完整demo，拉走直接看效果

<!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 = document.getElementById('parent');var child1 = document.getElementById('child1');var child2 = document.getElementById('child2');child2.innerHTML = child1.innerHTML;setInterval(function () {if(parent.scrollTop >= child1.scrollHeight) {parent.scrollTop = 0;} else {parent.scrollTop++;}}, 20);})()</script>
</body>
</html>

js实现滚动条自动滚动（scrollTop）相关推荐

html实现自动滚动,js实现滚动条自动滚动
本文实例为大家分享了js实现滚动条自动滚动的具体代码,供大家参考,具体内容如下效果类似于直播网站的评论,会一条接着一条向上 go out : js部分很简单:通过控制scrolltop的值来实现自动 ...
JS控制滚动条的位置 JS控制TextArea滚动条自动滚动到最下部
S控制滚动条的位置 window.scrollTo(x,y); 竖向滚动条置顶 window.scrollTo(0,0); 竖向滚动条置底 window.scrollTo(0,document.bod ...
【转载】让DIV的滚动条自动滚动到最底部的3种方法
转载自:脚本之家 → 网络编程 → JavaScript → javascript技巧 → 让DIV的滚动条自动滚动到最底部的3种方法(推荐) http://www.jb51.net/article ...
点击li,ul滚动条自动滚动到顶部，怎么解决分享。el-tooltip的focusing不要display：none,隐藏就行
点击li,ul滚动条自动滚动到顶部,怎么解决分享.el-tooltip的focusing不要display:none,隐藏就行
vue 实现数据滚动显示_vue实现动态添加数据滚动条自动滚动到底部的示例代码...
在使用vue实现聊天页面的时候,聊天数据动态加到页面中,需要实现滚动条也自动滚动到底部.这时我找到网上有个插件 vue-chat-scroll 但是安装后发现是用不了的,报错信息如下: VM14383 ...
datagridview滚动条自动滚动_Win32编程基础之滚动条
(图片来源:游戏<ATRI> 通过使用滚动条,窗口可以显示比它大的文档或图片,用户可以滚动用户区中的数据对象来看到对象超出窗口边界的部分. 如果窗口的用户区比窗口的边框要大,窗口应该使用滚 ...
datagridview滚动条自动滚动_微软新贡献:进一步优化Chromium的滚动特性
基于谷歌的开源浏览器Chromium,近日微软面向Windows 10.Windows 7和macOS平台推出了首个Edge Beta版本.新版本中引入了诸多新功能,并有望在近期的版本更迭中获得增强版 ...
html网页滚动条自动滚动,win10网页滚动条自动滚动怎么办-解决网页滚动条自动滚动的方法 - 河东软件园...
在使用电脑浏览器进行浏览网页的时候,我们会使用鼠标上的滑轮来下拉网页进行浏览.最近有位win10用户向小编分享了一个系统错误,在打开浏览器之后我们不使用鼠标,但是网页会自动下滑到最末端.在排除了鼠标硬 ...
js 滚动条自动滚动到最底部
<div id="box"><div>内容1</div><div>内容1</div><div>内容1< ...

js实现滚动条自动滚动（scrollTop）

js实现滚动条自动滚动（scrollTop）相关推荐

最新文章

热门文章