实现屏幕自动滚动

需求：数据量超出屏幕时，屏幕自动滚屏

• 分以下步骤
• 获取纵向滚动条的位置
• 使用定时器增加滚动量
• 鼠标移入时滚动暂停
• 鼠标移出时滚动继续
• 上代码

// 定义全局变量定时器
let setTimeName = null;
/**
 * @description 初始化屏幕滚动
 * @params {String} type 传入需要屏幕滚动Dom的ID
**/
initScrollMove(id) {
  // 定义承接滚动量变量
  let moveHeight = -1;
  // const $this = this;
  const timeAuto = () => {
    if (setTimeName === null) {
      setTimeName = setInterval(()=> {
        // 即使没有滚动条 scrollTop的值也为零🔔🔔🔔
        const scrollH = document.getElementById(id) && document.getElementById(id).scrollTop;
        // 若滚动到底部 那么重新滚动
        if (moveHeight === scrollH) {
          moveHeight = -1;
          // scrollTop 和 scrollLeft是可以设置 其他的scroll属性都是只读属性🔔🔔🔔
          document.getElementById(id).scrollTop = 0;
        } else {
          moveHeight = document.getElementById(id).scrollTop;
          // 若设置的值大于实际最大滚动量 那么获取该值为实际最大值🔔🔔🎈
          document.getElementById(id).scrollTop += 1;
        }
      }, 100)
    } else {
      clearInterval(setTimeName);
      setTimeName = null;
    }
  }
  const Ele = document.getElementById(id);
  Ele.addEventListener('mouseenter', () => {
    clearInterval(setTimeName);
    setTimeName = null;
  });
  Ele.addEventListener('mouseout', () => {
    timeAuto();
  })
}
// 最后在离开该路由之前清除定时器👍👍👍
beforeRouteLeave(to, from, next) {
  clearInterval(setTimeName);
  setTimeName = null;
}

Remark: 该定时器适合数据量不是特别的大项目，如果数据量特别大请使用数据用懒加载; 清除定时器是要注意，如果使用了路由缓存也可以在deactivated钩子函数中清除;