JS滚动条自动滚动

<ul class="scrollTable">
    <li>11111</li>
    <li>11111</li>
    <li>11111</li>
    <li>11111</li>
    <li>11111</li>
<ul/>

Vue代码

mounted() {
        this.autoScroll(`.scrollTable`);
    }



methods:{
    
    /**
     * 滚动条自动滚动
     * @param { string } tBodyName 容器选择器
     * @param { number } delay 定时器多久触发一次 默认100ms
     * @param { object } object 返回值 可以控制是否滚动
     */
    autoScroll(tBodyName, delay = 50) {
      const tBody = document.querySelector(`${tBodyName}`);
      let control = {
        isScroll: true, // 是否滚动
        isSelect: false, // 是否被选中
      };
      tBody.addEventListener("mousemove", () => {
        control.isScroll = false;
      });
      tBody.addEventListener("mouseleave", () => {
        control.isScroll = true;
      });
      let timer = null;
      setInterval(() => {
        const scrollHeight = tBody.scrollHeight;
        const clientHeight = tBody.clientHeight;
        if (
          Math.abs(tBody.scrollTop + clientHeight - scrollHeight) <= 5 &&
          !control.isSelect
        ) {
          if (timer != null) {
            return;
          }
          timer = setTimeout(() => {
            tBody.scrollTop = 0;
            timer = null;
          }, 1000);
        } else {
          if (control.isScroll && !control.isSelect) {
            tBody.scrollTop += 1;
          }
        }
        // console.log(
        //   "===============>",
        //   tBody.scrollTop,
        //   scrollHeight,
        //   clientHeight
        // );
      }, delay);
      return control;
    },
  }

 

这段代码实现了一个自动滚动的函数autoScroll，接受两个参数：tBodyName表示要滚动的元素的选择器，delay表示滚动的延迟时间（默认为50毫秒）。

函数中定义了一个control对象，包含两个属性：isScroll表示是否允许滚动，isSelect表示是否被选中。

函数通过监听鼠标移动事件和鼠标离开事件来控制滚动的开始和停止。当鼠标在滚动元素上移动时，将禁止滚动；当鼠标离开滚动元素时，将允许滚动。

函数使用setInterval设置了一个定时器，每隔一段时间执行一次滚动操作。滚动的逻辑是：判断滚动条是否到达底部，如果到达底部且不是因为被选中而停止滚动，则在1秒后将滚动条位置重置为顶部；否则，如果允许滚动且未被选中，则将滚动条向下滚动1个单位。

最后，函数返回control对象，可以通过修改isScroll和isSelect属性来控制滚动的开始和停止。