原生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 判断客户端浏览器类型代码
Mar 01 Javascript
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
node+express+ejs制作简单页面上手指南
Nov 26 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
javascript如何创建对象
Aug 29 Javascript
jquery实现图片上传前本地预览
Apr 28 jQuery
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
微信小程序之数据缓存的实例详解
Sep 29 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
vue+iview+less+echarts实战项目总结
Feb 22 Javascript
Vue数据绑定实例写法
Aug 06 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
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
JavaScript的eval JSON object问题
2009/11/15 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
js中定义一个变量并判断其是否为空的方法
2014/05/13 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
python django事务transaction源码分析详解
2017/03/17 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
Python3解释器知识点总结
2019/02/19 Python
Python实现TCP通信的示例代码
2019/09/09 Python
python实现大学人员管理系统
2019/10/25 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
init进程的作用
2015/08/20 面试题
技校生自我鉴定
2013/12/08 职场文书
运动会领导邀请函
2014/01/10 职场文书
城市创卫标语
2014/06/17 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
失恋33天观后感
2015/06/11 职场文书
详解MongoDB的条件查询和排序
2021/06/23 MongoDB
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS