vue el-scrollbar 自动滚动加载

1.在Vue项目中，‌使用el-scrollbar需要先安装element-ui框架

<div>
  <div class="dash-card">
    <!-- 使用el-scrollbar组件创建滚动条 -->
    <!-- mouseenter.native 当鼠标进入滚动条时，停止滚动 -->
    <!-- mouseleave.native 当鼠标离开滚动条时，开始滚动 -->
    <el-scrollbar
      @mouseenter.native="stopScroll('scrollDiv1')" 
      @mouseleave.native="startScroll('scrollDiv1')" 
      class="scrollbar"
      name="scrollBox"
      style="height: 100%"
      ref="scrollDiv1" 
    >
      <!-- 设置滚动条的引用ref为scrollDiv1 -->
      <!-- 使用v-for指令循环渲染50个div元素 -->
      <div v-for="item in 50" :key="item" class="send-item">
        {{ "滚动" + item }}  <!-- 显示滚动加数字的文本 -->
      </div>
    </el-scrollbar>
  </div>
</div>

2.滚动盒子设置样式

<style lang="scss" scoped>
.dash-card {
  width: 300px;  /* 设置卡片宽度为300像素 */
  height: 300px;  /* 设置卡片高度为300像素 */
  background-color: rgb(201, 141, 23);  /* 设置卡片背景颜色 */
}

.scrollbar {
  height: 100%;  /* 设置滚动条高度为100% */
  box-sizing: border-box;  /* 设置盒模型为border-box */
  padding: 10px;  /* 设置内边距为10像素 */
}

/* 使用:deep()选择器来深度选择子组件的样式 */
:deep() .el-scrollbar {
  height: 100%;  /* 设置滚动条高度为100% */
}

/* 使用:deep()选择器来深度选择子组件的样式 */
:deep() .el-scrollbar__wrap {
  overflow-x: hidden;  /* 隐藏水平滚动条 */
  margin-right: -27px !important;  /* 设置右边距为-27像素隐藏竖滚动条*/
}

.send-item {
  margin: 0 8px;  /* 设置外边距为0和8像素 */
  line-height: 30px;  /* 设置行高为30像素 */
  border-bottom: 1px dashed;  /* 设置底部边框为1像素的虚线 */
}

</style>

3. 滚动js方法

 mounted() {
    // 首次加载默认执行自动滚加载
    this.updateScrollTop("scrollDiv1");
  },
  methods: {
    // 开始滚动指定的DOM元素
    startScroll(dom) {
      // 将dom + "Move"属性的值设为false，表示滚动可以继续进行
      this[dom + "Move"] = false;
      // 调用updateScrollTop方法来更新滚动位置
      this.updateScrollTop(dom);
    },

    // 停止滚动指定的DOM元素
    stopScroll(dom) {
      // 将dom + "Move"属性的值设为true，表示滚动应该停止
      this[dom + "Move"] = true;
    },

    // 更新指定DOM元素的滚动位置
    updateScrollTop(dom) {
      // 获取DOM元素的第一个子元素
      let x = this.$refs[dom].$el.children[0];
      // 调用scrollThen方法来执行滚动逻辑
      this.scrollThen(x, dom).then();
    },

    // 实际执行滚动逻辑的异步方法
    async scrollThen(x, dom) {
      let that = this;
      // 使用do-while循环和await关键字来实现定时滚动
      do {
        // 每次滚动后检查是否需要继续滚动，直到dom + "Move"属性为true
        await new Promise(resolve => {
          // 每隔100毫秒执行一次滚动
          setTimeout(() => {
            resolve();
          }, 100);
        });

        // 如果滚动高度小于95%的元素高度，则继续滚动
        if (parseFloat(x.clientHeight / x.scrollHeight) < 0.95) {
          // 如果滚动到底部，则重置滚动位置
          if (x.scrollHeight - x.scrollTop === x.clientHeight) {
            x.scrollTop = 0;
          } else {
            // 否则，滚动位置加1
            x.scrollTop++;
            // console.log(x.scrollTop);
          }
        }
      } while (!that[dom + "Move"]);
    },