1  var ScrollMiddle = {
 2          'Odiv':document.getElementById('comment'), // 目标DOM
 3          'Oli': document.getElementById('comment').getElementsByTagName('li'),
 4          'times':30,            // 配置滚动时间
 5          'delay':1000,        // 配置暂停的时间
 6          inint:function(){
 7              this.size = this.Oli.length;
 8              this.height = 59;
 9              this.countHeight =this.size * this.height;
10              this.Odiv.innerHTML+=this.Odiv.innerHTML;
11              this.timer = null;
12          },
13          scroll:function(){
14              var _this = this;
15              _this.inint();
16              function scrolls(){
17
18                  var scrollValue = _this.Odiv.scrollTop;
19                  var sub_timer = null;
20                  var num=0;
21                  if(scrollValue>=_this.countHeight){
22                      _this.Odiv.scrollTop = 0;
23                  }else{
24                      _this.Odiv.scrollTop++;
25                      if(scrollValue%_this.height==0){
26                          clearInterval(_this.timer)
27                          function delay(){
28                              num++;
29                              if(num==3){
30                                  num=0;
31                                  clearInterval(sub_timer);
32                                  sub_timer = null;
33                                  clearInterval(_this.timer)
34                                  _this.timer = setInterval(scrolls,_this.times);
35                                  return false;
36                              }
37                          }
38                          sub_timer = setInterval(delay,_this.delay)
39                      }
40                  }
41              }
42              this.timer = setInterval(scrolls,_this.times);
43          }
44      }

调用方法:

ScrollMiddle.scroll();

HTML 结构:

<ul id="comment"><li></li>......
</ul>

CSS结构:

#comment{width:200px;height:200px;overflow:hidden;
}

转载于:https://www.cnblogs.com/HCJJ/p/5197681.html

JS 实现可停顿的垂直滚动相关推荐

  1. js 停顿一秒_JS 实现可停顿的垂直滚动实例代码

    下面小编就为大家带来一篇JS 实现可停顿的垂直滚动实例代码.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 var ScrollMiddle = { 'Odiv':doc ...

  2. 原生JS基于window.scrollTo()封装垂直滚动动画工具函数

    概要: 原生JS基于window.scrollTo()封装垂直滚动动画工具函数,可应用与锚点定位.回到顶部等操作. ####封装原因: 在vue项目中,遇到需要实现垂直滚动效果的需求,初步想到的方法有 ...

  3. 原生js获取和设置页面垂直滚动高度

    最近想用原生js实现一些交互效果,以下代码是返回顶部按钮要用到的一个方法:获取和设置页面垂直滚动高度,如果用jq可以简单实现,用原生js,其实就是要多考虑浏览器的兼容性: /*** 获取&&a ...

  4. 宽度为100%的HTML表格,在tbody中有垂直滚动

    本文翻译自:HTML table with 100% width, with vertical scroll inside tbody How can I set for <table> ...

  5. H5类似淘宝头条垂直滚动效果

    不同样式的垂直滚动: 无缝垂直滚动: 间歇性垂直滚动(一次滚动一条): 间歇性垂直滚动(一次滚动两条): 变量解释: speed:滚动的速度: delay:暂停的时长: scrollTop :滚动的高 ...

  6. jq文字垂直滚动/滚屏效果

    下载地址:https://github.com/ybx13579/text-verticality-scroll 直接复制文本即可查看,或点击 ↑ 地址下载查看 效果预览 <!DOCTYPE h ...

  7. 相册左右滑动html,JS实现的相册图片左右滚动完整实例

    本文实例讲述了JS实现的相册图片左右滚动效果.分享给大家供大家参考,具体如下: 执行左移右移函数: var $get = function(id) { return "string" ...

  8. H5新闻垂直滚动效果

    做成不同样式的垂直滚动:无缝垂直滚动,间歇性垂直滚动(一次滚动一条),间歇性垂直滚动(一次滚动两条): *先上代码(想知道原理的请往后看)~~~~* 变量解释: speed:滚动的速度: delay: ...

  9. uniapp垂直滚动公告栏,可上下拖动内容

    垂直滚动公告栏 效果图 <template><view><view class="an-notice-box" :style="'backg ...

最新文章

  1. 【组队学习】【31期】 吃瓜教程——西瓜书+南瓜书
  2. 湖北大学829数据库原理与c语言程序设计,2017年湖北大学教育学院829数据库原理与C语言程序设计考研强化模拟题...
  3. response.getWriter().write 传递中文乱码
  4. 9年当上架构师,我的很多想法变了
  5. AndroidManifest.xml详解
  6. ckeditor3 配置
  7. 《只是为了好玩-Linux之父Linus自传》
  8. XStream xml转java对象
  9. 话里话外:PDM、ERP和MES的实施,谁先谁后?
  10. git——远程仓库基本操作与冲突解决
  11. 最火的开源项目及编程语言
  12. 静默安装Oracle11G
  13. Floorplan的SSN(Simultaneous Switching Noise)问题
  14. python中sticky_vue-sticky组件详解
  15. 如何制作一款Chrome浏览器扩展程序
  16. 如何用移动硬盘备份计算机,怎么自动备份电脑资料到移动硬盘
  17. 推流拉流RMTP方案:Nginx+ffmpeg/obs+vlc/h5
  18. java web开发(和vue联合开发)
  19. Linux centos搭建web服务器
  20. Android Kotlin okhttp Retrofit 线程协程那些事

热门文章

  1. linux进行主机发现,linux – 网络上所有计算机的主机名发现
  2. XMT.com超200万被区块链终端交易
  3. 待办事项优先级 开发_如何通过创建主题待办事项确定学习内容的优先级
  4. Python 数据库操作 psycopg2
  5. 14 集成测试方法之自底向上集成方法
  6. 1051 Pop Sequence(两种双指针思路)
  7. 2021年还适合参加软件测试培训吗
  8. selenium--iframe之模拟qq空间登录
  9. Zookeeper迁移(扩容/缩容)
  10. 阿里云MWC 2019发布7款产品:Blink每秒可完成17亿次计算