简单html无缝向上滚动,原生js 一个简单的无缝向上滚动

一、需求：

1.一个列表，一页显示四条，表格头部固定，自动向上轮播，每次轮播四条即一页。

2.鼠标上移停止滚动

3.鼠标移走恢复滚动

二、原理：

1、css：

通过position和relative配合，通过改变滚动部分的top值来确定显示当前可见部分

盒子的高度写死，为4条列表加起来的高度，overflow设为hidden让溢出部分隐藏掉

滚动部分高度自适应，等于所有列表高度(包括添加的虚拟列表)即可

注意：滚动部分的top值要直接写行内样式，即style="top:0"这种方式去写，因为js通过document.style.top只能获取行内样式(另：js通过style.[属性值]只能获取行内样式)

2.js：

列表内容直接由数组循环生成

在列表尾部添加一定数量的虚拟数据:

a.若总数刚好能被4整除，添加4个虚拟数据即可

b.若总数不能被4整除但余数小于4，添加4个虚拟数据

c.若总数不能被4整除且余数大于4，添加8个虚拟数据

使用css3样式transition做动画效果

核心重点：关键转换点：判断原数据(不包括伪造的数据)是否全部偏移容器，若偏移：

a.关掉动画效果

b.重置top值

c.通过setTimeout把滚动函数插入队列中，等待上面的复位执行完之后执行一次，去除中断的时间

设置定时器setInterval做自动播放功能

-绑