在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 {/* 根据内容进行相应样式调整 */
}

​