在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
};
}
};