原生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做自动播放功能
  -绑定mouseover事件和mouseout做鼠标移上移出操作

三、不多逼逼，直接上代码：

1、html：

  
  
  
  
  


这是滚动的header部分

  

2、css:

ul,li{
    list-style: none;
    padding: 0;
    margin: 0;
}
#container{
    width: 531px;
    height: 164px;
    position: relative;
    margin: 0 auto;
    overflow-y: hidden;
}
.scrollHeader{
    width: 531px;
    height: 40px;
    border: 1px solid #ff6557;
    margin: 0 auto;
    line-height: 40px;
    text-align: center;
    background: #ff6557;
    color: #fff;
    box-sizing: border-box;
}
#list{
    position: absolute;
    width: 531px;
}
#list>li{
    height: 40px;
    line-height: 40px;
    border: 1px solid #ccc;
    border-top: none;
    text-align: center;
}

3、js

const data = []; // 原本的data数据
let newData = []; // 加上虚拟item的数据
let itemNum = 4; // 一页显示的条数
let num = data.length % itemNum; // 记录data除以出现item数目的余数
for (let i = 1; i<= 17; i++){
  data.push(`这是第${i}段li`);
}

let addData = num > itemNum/2 ? data.slice(0,num + itemNum) : data.slice(0,itemNum * 2);
console.log(addData);
newData = data.concat(addData);
window.onload = function () {
  let list = document.getElementById("list");
  let time = 5000; // 循环时间
  //生成ul节点下的li
  let generateList = function (listData) {
    listData.length && listData.forEach((item) => {
      let listItem = document.createElement("li");
      listItem.innerHTML = `${item}`
      list.appendChild(listItem);
    });
  }
  // 滚动
  let scroll = function () {
    let top = parseInt(list.style.top);
    if (parseInt(list.style.top) < -41 * (data.length)) { // 判断原数据（不包括伪造的数据）是否全部偏移容器
      // debugger;
      list.style.transition = "";
      list.style.top = parseInt(list.style.top) - (-41 * (data.length)) + "px";
      setTimeout(scroll, 0); // 把top复位的时候立马把scroll函数插入队列中，等待上面的复位执行完之后执行一次，去除中断的时间
      // setTimeout(scroll, 100); // 如果出现过渡效果没清除掉的情况，把时间设为100ms试试
    }else{
      list.style.transition = "all 2s";
      list.style.top = top - 164 + "px";
    }
  }
  generateList(newData);
  // 设置定时器执行滚动
  let timer = setInterval(scroll, time);
  // 鼠标上移时不自动滚动
  list.onmouseover = function () {
    clearInterval(timer);
  }
  // 鼠标离开后又恢复自动滚动
  list.onmouseleave = function () {
    timer = setInterval(scroll, time);
  }
};

附上github地址：https://github.com/neymar2017/my-marquee
另：短时间写的粗略代码，有问题请指出，谢谢指教