利用定时器实现无限滚动

前言

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

一、实现原理？

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

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

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

二、代码

1.HTML元素

<-- 父元素 -->
<div
   id="parent"
   @mousemove="stopScroll"
   @mouseout="startScroll"
   class="event-content"
  >
<-- 子元素 -->
  <div id="children" v-if="renderData.length > 0">
    <-- 子元素列表 -->
    <div
      v-for="(item, index) in renderData"
      :key="item.id + index"
      class="content-list"
    >
    </div>

  </div>

</div>

2.js代码

 // 循环滚动定时器
     let rollTimer
     rollTimer = setInterval(() => {
        let ul1 = document.getElementById("children"); // 内容盒子dom
        let ulbox = document.getElementById("parent"); // 父盒子
        if (!ul1 || !ulbox) {
          // 如果两个dom不存在，则停止计时器
          clearInterval(rollTimer )
          return;
        }
        // 如果列表内容为空，则无法滚动
        if (renderData.length > 0) {
          // 如果滚动条不出现
          if (ulbox?.clientHeight > ul1?.clientHeight) {
            // 获取的后台数据backData添加到渲染数据，使滚动条出现
            renderData.push(backData)     
          }
          // 当滚动条到达底部时，继续添加数据
          if (ulbox?.scrollTop + ulbox?.clientHeight >= ul1?.scrollHeight) {
            // 限制滚动列表数据不超过2千条容易卡顿
            const maxLength = Math.max(2000, requestData.length);
            if (renderData.length > maxLength) {
              //到达底部后要手动减少滚动条高度，否则不会继续滚动
              ulbox.scrollTop -= 300;
              renderData.splice(0, renderData.length - maxLength);
            }
            renderData.push(backData)
          } else {
            ulbox.scrollTop++;   // 如果还没到底部，则继续滚动
          }
        }
      }, 70);

---

总结

        利用定时器滚动要注意随时清除定时器，在vue中离开页面后应该立即清除定时器，否则容易造成定时器混乱且浪费性能。在这里我进行了判断，如果dom元素不存在则清除定时器。