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

效果显示

(鼠标移入，滚动停止；鼠标移出，滚动继续)

实施原则

1.html结构：核心是ul li，ul的外层用div包裹。因为内容流通和滚动的无缝连接，所以在原来的ul后面应该有一个内容相同的ul。下图：

(红色边框是可视区域div，overflow:hidden为了方便查看效果，此处删除了；)

2.样式：因为要滚动，所以必须有2 ul的高度，div必须设置溢出：隐藏；

代码实现

HTML:

div ID=' review _ box ' ul ID=' comment 1 '辅助工具1/li辅助工具2/li辅助工具3/li辅助工具4/li辅助工具5/li辅助工具6/Li/ul UL ID=' comment 2 '/ul/div CSS :

* { margin : 0；padd : 0；} div { width: 100pxheight: 63px/*必须*/overflow:隐藏；/*必须*/margin : 50px auto；border: 1px纯红；文本对齐：中心；} ul { list-style : none；} JavaScript 3:

window . onload=roll(50)；函数roll(t){ var ul1=document . getelementbyid(' comment 1 ')；var ul2=document . getelementbyid(' comment 2 ')；var ulbox=document . getelementbyid(' review _ box ')；ul2 . innerhtml=ul1 . innerhtml；ulbox . scroll top=0；//当开头没有滚动时，设置为0 var timer=set interval(roll start，t)；//设置定时器。参数t在这里用作间隔时间(以毫秒为单位)。参数t越小，滚动速度越快。//当鼠标移动到div时暂停滚动。乌尔博克斯。onmouseover=function(){ clear interval(计时器)；}//鼠标移出div后继续滚动。乌尔博克斯。onmouseout=function(){ timer=set interval(roll start，t)；} }//开始滚动函数函数rollStart() {//上面声明的DOM对象是本地对象，需要再次声明varul1=document . getelementbyid(' comment 1 ')；var ul2=document . getelementbyid(' comment 2 ')；var ulbox=document . getelementbyid(' review _ box ')；//对于正常滚动，scrollTop的值为1，如果(ulbox)为0，则返回0。ScrollTop=ul1。ScrollHeight) {ulbox。当滚动高度大于列表内容高度时，scroll top=0；} else { ulbox.scrollTop}}摘要

以上是边肖介绍的实现列表内容自动向上滚动效果的原JS，对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！