腾讯网站建设,买卖信息网站,备案成功后怎么建网站,网站定制开发一般多久 在vue3 中#xff0c;使用element-plus中的el-scrollbar#xff0c;在el-scrollbar中如果元素过大出现滑动#xff0c;就自动滑动#xff0c;到底部时就返回顶部重新向下滑动#xff0c;鼠标放入框内停止滑动
模板部分#xff1a;
templateel-scrollbar… 在vue3 中使用element-plus中的el-scrollbar在el-scrollbar中如果元素过大出现滑动就自动滑动到底部时就返回顶部重新向下滑动鼠标放入框内停止滑动
模板部分
templateel-scrollbar refscrollArea classscroll-container mouseenterstopScroll mouseleavestartScrolldiv classscroll-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 {/* 根据内容进行相应样式调整 */
}
