在vue3 中，使用element-plus中的el-scrollbar,让内容元素自动滚动

​
在vue3 中，使用element-plus中的el-scrollbar，在el-scrollbar中如果元素过大出现滑动，就自动滑动，到底部时就返回顶部重新向下滑动，鼠标放入框内停止滑动

模板部分：

<template>
  <el-scrollbar ref="scrollArea" class="scroll-container" @mouseenter="stopScroll" @mouseleave="startScroll">
    <div class="scroll-content">
      <!-- 这里放入你想滚动的内容 -->
    </div>
  </el-scrollbar>
</template>

脚本部分：

import { ref, onMounted, onUnmounted } from 'vue';
import { ElScrollbar } from 'element-plus';

export default {
  components: {
    ElScrollbar
  },

  setup() {
    const scrollArea = ref(null);
    let timer = null;
    const SCROLL_SPEED = 1; // 每次滚动的像素数，可以根据需要调整

    const startScroll = () => {
      if (timer) {
        clearInterval(timer);
      }
      timer = setInterval(() => {
        // 获取滚动容器
        const container = scrollArea.value.$el.querySelector('.el-scrollbar__wrap');
        // 判断是否已滚动到底部
        if (container.scrollHeight - (container.scrollTop + container.clientHeight) <= 0) {
          // 滚动到顶部
          container.scrollTop = 0;
        } else {
          // 向下滚动
          container.scrollTop += SCROLL_SPEED;
        }
      }, 30); // 根据需要调整滚动间隔
    };

    const stopScroll = () => {
      if (timer) {
        clearInterval(timer);
      }
    };

    onMounted(() => {
      startScroll();
    });

    onUnmounted(() => {
      stopScroll();
    });

    return {
      scrollArea,
      startScroll,
      stopScroll
    };
  }
};

样式部分:

.scroll-container {
  width: 100%;
  height: 300px; /* 你可以根据需要调整高度 */
}

.scroll-content {
  /* 根据内容进行相应样式调整 */
}

​