互联网行业是什么企业网站seo哪里好
动态滚动效果常常被用于展示动态数据，例如新闻列表、报警信息或实时数据流。这种效果不仅能够节省页面空间，还能增强用户体验。本文将通过一个具体的 Vue 组件案例，详细介绍如何实现一个动态滚动效果，尤其是如何在用户交互时暂停和恢复滚动。
场景描述
需求：需要在一个固定高度的容器中展示多条报警信息，并且这些信息会自动滚动展示。同时，当用户鼠标悬停在信息列表上时，滚动应暂停，鼠标移开后继续滚动。这种效果可以通过 Vue 和原生 JavaScript 的结合来实现。
实现思路
- 动态数据展示：使用 Vue 的
v-for指令动态渲染报警信息列表。 - 自动滚动逻辑：通过定时器和
scrollTop属性控制容器的滚动。 - 用户交互响应：监听鼠标进入和离开事件，动态控制滚动的暂停和恢复。
代码实现
脚本部分
在脚本中，我们实现了滚动逻辑，并通过 Vue 的生命周期钩子管理滚动效果的启动和销毁。
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import CardTitle from '@/components/CardTitle/index.vue';const list = ref([// 报警信息数据
]);let isScrolling = true; // 控制滚动状态
let scrollInterval: any = null; // 定时器引用onMounted(() => {const container = document.querySelector('.list-container') as HTMLElement;if (!container) {console.error('滚动容器未找到，请检查类名是否正确');return;}const scrollHeight = container.scrollHeight;const containerHeight = container.clientHeight;if (scrollHeight <= containerHeight) {console.warn('内容高度小于容器高度，无需滚动');return;}let scrollPosition = 0;function smoothScroll() {if (!isScrolling) return;scrollPosition += 1; // 每次滚动的高度if (scrollPosition >= scrollHeight - containerHeight) {scrollPosition = 0; // 滚动到顶部}container.scrollTop = scrollPosition;scrollInterval = setTimeout(smoothScroll, 100); // 递归调用，模拟滚动}// 开始滚动smoothScroll();// 鼠标进入暂停滚动container.addEventListener('mouseenter', () => {isScrolling = false;clearTimeout(scrollInterval);});// 鼠标移出恢复滚动container.addEventListener('mouseleave', () => {isScrolling = true;smoothScroll();});
});onUnmounted(() => {// 清理事件监听器和定时器const container = document.querySelector('.list-container') as HTMLElement;if (container) {container.removeEventListener('mouseenter', () => {});container.removeEventListener('mouseleave', () => {});}clearTimeout(scrollInterval);
});
</script>
.list-container {height: 100%;overflow-y: auto; /* 允许垂直滚动 */
}关键点解析
- 滚动逻辑：通过
setTimeout和scrollTop实现平滑滚动。每次滚动固定高度，当滚动到底部时重置到顶部。 - 用户交互：监听
mouseenter和mouseleave事件，动态控制滚动状态。 - 性能优化：使用
clearTimeout清理定时器，避免内存泄漏。