利用定时器实现无限滚动

前言

  今天领导要求做一个日志滚动的页面，让日志数据逐渐递增然后自动滚动，鼠标移入暂停，移除继续，作为一个码农，必须给他安排，先看看实现效果

一、实现原理？

        1. 给定一个父元素，设置其宽高，

        2. 子元素为一个列表，其高度超出父元素即可

        3. 设置一个定时器，获取父子元素的dom,间隔一段时间则增加父元素的滚动高度，即可实现自动滚动，但是要无限滚动还需要在滚动条到底部是自动增加数据，我这里是向后台请求数据，当然也可以自己伪造数据，或者将滚动高度设置为0重新开始滚动

二、代码

1.HTML元素

<-- 父元素 -->
<div
   id="parent"
   @mousemove="stopScroll"
   @mouseout="startScroll"
   class="event-content"
  >
<-- 子元素 -->
  <div id="children" v-if="renderData.length &g