js实现滚动条自动滚动


Posted in Javascript onDecember 13, 2020

本文实例为大家分享了js实现滚动条自动滚动的具体代码,供大家参考,具体内容如下

效果类似于直播网站的评论,会一条接着一条向上 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,就被设为0
      parent.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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。 

Javascript 相关文章推荐
JavaScript入门教程 Cookies
Jan 31 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
js实现点小图看大图效果的思路及示例代码
Oct 28 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 Javascript
vue实现两个区域滚动条同步滚动
Dec 13 #Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 #Vue.js
js实现简单的轮播图效果
Dec 13 #Javascript
jquery实现淡入淡出轮播图效果
Dec 13 #jQuery
JavaScript实现移动小精灵的案例代码
Dec 12 #Javascript
详解vue中使用transition和animation的实例代码
Dec 12 #Vue.js
javascript中call,apply,bind的区别详解
Dec 11 #Javascript
You might like
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
ansible作为python模块库使用的方法实例
2017/01/17 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
python使用tornado实现登录和登出
2018/07/28 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
应用艺术专业个人的自我评价
2014/01/03 职场文书
教师研修随笔感言
2014/01/23 职场文书
学习心理学的体会
2014/11/07 职场文书
2014年底个人工作总结
2015/03/10 职场文书
电力工程合作意向书
2015/05/11 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
2015年重阳节主持词
2015/07/04 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python