vue前端简单实现无缝循环滚动自动播放，滚动条上下滚动，鼠标悬停，从鼠标滚动到哪里开始滚动超好用

在Vue中实现无缝循环滚动，可以通过计算滚动条位置和元素宽度来控制。下面是一个简单的例子：

<template>
  <div class="scroll-container" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay">
    <div class="scroll-wrapper" :style="{ transform: `translateX(-${currentOffset}px)` }">
      <div v-for="item in items" :key="item" class="scroll-item">{{ item }}</div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      currentOffset: 0,
      intervalId: null,
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'] // 可以是动态数据
    };
  },
  mounted() {
    this.startAutoPlay();
  },
  beforeDestroy() {
    this.stopAutoPlay();
  },
  methods: {
    startAutoPlay() {
      if (this.intervalId) return;
      this.intervalId = setInterval(this.scrollRight, 3000); // 自动滚动的间隔
    },
    stopAutoPlay() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
        this.intervalId = null;
      }
    },
    scrollRight() {
      const containerWidth = this.$el.clientWidth;
      this.currentOffset -= containerWidth;
      this.currentOffset = ((this.currentOffset % containerWidth) + containerWidth) % containerWidth;
    },
    scrollLeft() {
      const containerWidth = this.$el.clientWidth;
      this.currentOffset += containerWidth;
      this.currentOffset = ((this.currentOffset % containerWidth) + containerWidth) % containerWidth;
    }
  }
};
</script>
 
<style scoped>
.scroll-container {
  overflow: hidden;
  position: relative;
  width: 300px; /* 根据需要设置 */
}
 
.scroll-wrapper {
  display: flex;
  transition: transform 0.3s ease;
  width: 10000px; /* 假设有无限多的内容，通过此方式实现无缝滚动 */
}
 
.scroll-item {
  flex: 0 0 auto;
  width: 300px; /* 与容器宽度一致 */
}
</style>

在这个例子中，.scroll-container 是可滚动的容器，.scroll-wrapper 包含了所有要滚动的项，每个 .scroll-item 是一个具体的元素。通过计算 currentOffset 并应用 CSS 的 transform: translateX() 来控制滚动位置。scrollRight 和 scrollLeft 方法用于根据鼠标的滚动行为滚动内容。startAutoPlay 和 stopAutoPlay 方法分别用于开始和停止自动播放。