vue 自定义元素自动滚动鼠标移入停止移出滚动
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" /><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><title></title><style>.scroll-container {width: 300px; /* 根据需要设置宽度 */overflow: hidden; /* 隐藏溢出内容 */border: 1px solid #ccc; /* 可选：添加边框 */position: relative; /* 用于定位内部内容 */}.scroll-content {overflow-y: scroll; /* 启用垂直滚动 */height: 100%; /* 使内容区域填满容器 */}.scroll-item {height: 50px; /* 根据需要设置项的高度 */border-bottom: 1px solid #eee; /* 可选：添加分隔线 */padding: 10px; /* 可选：添加内边距 */box-sizing: border-box; /* 包含内边距和边框在高度内 */}</style>
</head><body>
<div id="app"><div class="scroll-container" ref="scrollContainer" :style="{'height':height +'px'}" @mouseenter="pauseScroll" @mouseleave="resumeScroll"><div class="scroll-content" ref="scrollContent"><!-- 假设这里有很多内容需要滚动 --><div v-for="(item, index) in items" :key="index" class="scroll-item">{{ item }}</div></div></div>
</div></body>
<script src="https://unpkg.com/vue@2.6/dist/vue.min.js"></script>
<script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script><!--组件-->
<script>var vm = new Vue({el: '#app',data() {return {items: Array.from({ length: 5 }, (_, i) => `Item ${i + 1}`), // 生成20个项作为示例内容scrollStep: 2, // 每次滚动的像素数scrollInterval: null, // 定时器IDisScrolling: false, // 是否正在滚动height:100}},mounted() {this.startAutoScroll();},beforeDestroy() {this.stopAutoScroll();},methods: {startAutoScroll() {this.scrollInterval = setInterval(this.scroll, 100); // 每100毫秒检查一次是否需要滚动},// 销毁定时器stopAutoScroll() {clearInterval(this.scrollInterval);this.scrollInterval = null;},// 鼠标移入时暂停滚动pauseScroll() {this.stopAutoScroll();},// 鼠标移出时恢复滚动resumeScroll() {this.startAutoScroll();},// 滚动内容scroll() {if (this.isScrolling) return; // 防止重复触发滚动const content = this.$refs.scrollContent;const scrollTop = content.scrollTop;const scrollHeight = content.scrollHeight;const clientHeight = this.$refs.scrollContainer.clientHeight;console.log(clientHeight,"clientHeight")// 计算下一个滚动位置let nextScrollTop = scrollTop + this.scrollStep;// 检查是否到达底部if (nextScrollTop >= scrollHeight - clientHeight) {nextScrollTop = 0; // 重置到顶部}// 应用新的滚动位置content.scrollTop = nextScrollTop;// 如果滚动位置发生了变化，则标记为正在滚动（防止重复触发）if (scrollTop !== nextScrollTop) {this.isScrolling = true;// 在下一个事件循环中取消标记（使用 setTimeout 实现异步）setTimeout(() => {this.isScrolling = false;}, 0);}},}})
</script></html>
注：简化开发，方便粘贴
