vue3（实现上下无限来往滚动）

最新推荐文章于 2025-06-06 14:44:34 发布

～蓝桉

最新推荐文章于 2025-06-06 14:44:34 发布

阅读量2.3k

点赞数 5

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_62639453/article/details/138430029

文章介绍了如何在Vue项目中创建一个大屏容器，内容缓慢滚动并响应鼠标交互，实现滚动到顶部后延迟再滚动到底部的循环效果。代码展示了如何使用Vue的ref和生命周期钩子来控制滚动行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、问题描述

一般在大屏项目中，很常见的效果，就是容器中的内容缓慢地向下移动，直到底部停止，然后快速滚动回顶部，然后接着缓慢滚动到底部。并且在特定的情况下，还需要进行一些小交互，那就还得让他停下来，当鼠标移入的时候，停止滚动，当鼠标移开的时候，继续从停止的地方接着滚动。如此反复。

二、效果

三、demo代码

<template>
  <div class="clean-con" @mouseenter="stopAutoScroll" @mouseleave="startAutoScroll">
    <div class="clean-main" ref="mainRef">
      <div class="clean-item"></div>
      <div class="clean-item"></div>
      <div class="clean-item"></div>
      <div class="clean-item"></div>
      <div class="clean-item"></div>
      <div class="clean-item"></div>
      <div class="clean-item"></div>
      <div class="clean-item"></div>
      <div class="clean-item"></div>
      <div class="clean-item"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const mainRef = ref(null);
let isAutoScrolling = true;

const stopAutoScroll = () => {
  isAutoScrolling = false;
}

const startAutoScroll = () => {
  isAutoScrolling = true;
  autoScroll();
}

const autoScroll = () => {
  if (!isAutoScrolling) return;

  const mainEl = mainRef.value;
  mainEl.scrollTop += 1; // 每次滚动的距离

  if (mainEl.scrollTop >= mainEl.scrollHeight - mainEl.clientHeight) {
    setTimeout(() => {
      mainEl.scrollTo({ top: 0, behavior: 'smooth' });
      setTimeout(autoScroll, 2000); // 2秒后再次滚动到底部
    }, 1000); // 暂停1秒后开始快速滚回顶部
  } else {
    requestAnimationFrame(autoScroll);
  }
}

onMounted(() => {
  startAutoScroll();
});
</script>

<style>
.clean-con {
  overflow: hidden;
  padding: 20px;
  width: 400px;
  height: 700px;
  background-color: #000;
}
.clean-main {
  overflow-y: scroll;
  height: 700px;
}
.clean-item {
  height: 200px;
  background-color: #7c5c5c;
  margin-top: 20px;
}
.clean-item:last-child {
  background-color: aqua !important;
}
</style>

四、代码片段说明

当主区域(mainEl)的滚动距离(mainEl.scrollTop)大于等于内容总高度(mainEl.scrollHeight)减去可见区域高度(mainEl.clientHeight)时，意味着主区域已经滚动到底部。这个判断条件用于触发以下操作：

首先，我们会通过 mainEl.scrollTo({ top: 0, behavior: 'smooth' }) 将主区域快速滚动回顶部，使用 behavior: 'smooth' 参数可以实现平滑的滚动效果。
然后，我们设置一个延迟，等待1秒钟，然后再次启动自动滚动逻辑。在这个延迟期间，主区域会停留在顶部，给用户一种暂停停顿的感觉。
在1秒延迟后，我们调用 setTimeout(autoScroll, 2000) 函数，即在2秒后再次触发自动滚动函数autoScroll。这会导致主区域快速滚动到底部，形成了一个循环滚动的效果。

整体来说，这段代码实现了一个不断循环、平滑滚动的效果：当主区域滚动到底部后，会快速回到顶部，然后在延迟后再次快速滚动到底部，如此反复，形成一个流畅的滚动循环效果。