原生JS实现列表内容自动向上滚动效果


Posted in Javascript onMay 22, 2019

效果展示

(鼠标移入,滚动停止;鼠标移出,滚动继续)

原生JS实现列表内容自动向上滚动效果

实现原理

1. html结构:核心是ul > li,ul外层包裹着div。因为想要内容循环滚动无缝衔接,所以在原有ul后面还要有一个一样内容的ul。如下图:

   (红色边框为可视区域div,此处为了方便查看效果去除overflow:hidden;)

原生JS实现列表内容自动向上滚动效果

2. 样式方面:由于要滚动,所以必须2个ul的高度 > 外层可视div高度,且div必须设置overflow:hidden;

代码实现

HTML:

<div id="review_box">
  <ul id="comment1">
   <li>第一条</li>
   <li>第二条</li>
   <li>第三条</li>
   <li>第四条</li>
   <li>第五条</li>
   <li>第六条</li>
  </ul>
  <ul id="comment2"></ul>
 </div>

CSS:

* {
  margin: 0;
  padding: 0;
 }
 div {
  width: 100px;
  height: 63px; /* 必须 */
  overflow: hidden;/* 必须 */
  margin: 50px auto;
  border: 1px solid red;
  text-align: center;
 }
 ul {
  list-style: none;
 }

JavaScript:

window.onload = roll(50);
 function roll(t) {
  var ul1 = document.getElementById("comment1");
  var ul2 = document.getElementById("comment2");
  var ulbox = document.getElementById("review_box");
  ul2.innerHTML = ul1.innerHTML;
  ulbox.scrollTop = 0; // 开始无滚动时设为0
  var timer = setInterval(rollStart, t); // 设置定时器,参数t用在这为间隔时间(单位毫秒),参数t越小,滚动速度越快
  // 鼠标移入div时暂停滚动
  ulbox.onmouseover = function () {
   clearInterval(timer);
  }
  // 鼠标移出div后继续滚动
  ulbox.onmouseout = function () {
   timer = setInterval(rollStart, t);
  }
 }
 // 开始滚动函数
 function rollStart() {
  // 上面声明的DOM对象为局部对象需要再次声明
  var ul1 = document.getElementById("comment1");
  var ul2 = document.getElementById("comment2");
  var ulbox = document.getElementById("review_box");
  // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
  if (ulbox.scrollTop >= ul1.scrollHeight) {
   ulbox.scrollTop = 0;
  } else {
   ulbox.scrollTop++;
  }
 }

总结

以上所述是小编给大家介绍的原生JS实现列表内容自动向上滚动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript 尚未实现错误解决办法
Nov 27 Javascript
js处理表格对table进行修饰
May 26 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
Vue中计算属性computed的示例解读
Jul 26 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 Javascript
小程序如何使用分包加载的实现方法
May 22 #Javascript
原生js实现trigger方法示例代码
May 22 #Javascript
koa router 多文件引入的方法示例
May 22 #Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 #Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 #Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 #Javascript
vue项目中mock.js的使用及基本用法
May 22 #Javascript
You might like
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
yii中widget的用法
2014/12/03 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
javascript读取xml
2006/11/04 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
判断网页编码的方法python版
2016/08/12 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
python 上下文管理器使用方法小结
2017/10/10 Python
python爬虫使用cookie登录详解
2017/12/27 Python
python区块及区块链的开发详解
2019/07/03 Python
Python request使用方法及问题总结
2020/04/26 Python
Java提供了哪些企业应用编程接口
2015/02/13 面试题
教师节获奖感言
2015/07/31 职场文书
消防安全主题班会
2015/08/12 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python