原生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 相关文章推荐
基于jquery的让页面控件不可用的实现代码
Apr 27 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
JavaScript判断数组是否存在key的简单实例
Aug 03 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
Oct 15 Javascript
vue的mixins属性详解
Mar 14 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 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
晶体管单管来复再生式收音机
2021/03/02 无线电
生成卡号php代码
2008/04/09 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
限制文本框输入N个字符的js代码
2010/05/13 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
vuejs如何配置less
2017/04/25 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
Python实现识别手写数字大纲
2018/01/29 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
Python基于WordCloud制作词云图
2019/11/29 Python
selenium如何定位span元素的实现
2021/01/13 Python
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
英文简历中的自我评价
2013/10/06 职场文书
厨房工作人员岗位职责
2013/11/15 职场文书
高中生学习的自我评价
2013/12/14 职场文书
日语专业个人求职信范文
2014/02/02 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
好人好事新闻稿
2015/07/17 职场文书
如何写好闭幕词
2019/04/02 职场文书
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL