vue实现无缝滚动（vue-seamless-scroll插件、css动画、scrollTop方法）

vue多种方式实现无缝滚动

• 方法一：vue-seamless-scroll插件
• • 安装依赖
  • 全局引入组件
  • 组件使用，配置相关属性
  • • vue2
    • vue3
  • 相关属性
  • 效果
• 方法二：css动画实现无缝滚动
• 方法三：使用scrollTop方法向上滚动
• 方法四：鼠标悬停时暂停滚动并且可以鼠标滚轮滚动（完整代码）

方法一：vue-seamless-scroll插件

安装依赖

//vue2
npm install vue-seamless-scroll --save
 
//vue3
npm install vue3-seamless-scroll --save

全局引入组件

//vue2
  import scroll from 'vue-seamless-scroll'
  Vue.use(scroll)
 
//vue3 
  import { createApp } from 'vue';
  import App from './App.vue';
  import vue3SeamlessScroll from "vue3-seamless-scroll";
  const app = createApp(App);
  app.use(vue3SeamlessScroll);
  app.mount('#app');

组件使用，配置相关属性

vue2

<template>
  <vue-seamless-scroll :data="listData" class="seamless-warp">
    <div class="item">
      <li v-for="(item, index) in listData" :key="index">
        <span class="title" v-text="item.title"></span
        ><span class="date" v-text="item.date"></span>
      </li>
    </div>
  </vue-seamless-scroll>
</template>
<style scoped>
.seamless-warp {
  height: 229px;
  overflow: hidden;
}
</style>
<script>
export default {
  data() {
    return {
      listData: [
        {
          title: "无缝滚动第一行无缝滚动第一行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第二行无缝滚动第二行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第三行无缝滚动第三行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第四行无缝滚动第四行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第五行无缝滚动第五行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第六行无缝滚动第六行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第七行无缝滚动第七行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第八行无缝滚动第八行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第九行无缝滚动第九行",
          date: "2017-12-16",
        },
      ],
    };
  },
};
</script>

 

vue3

<template>
  <vue3-seamless-scroll
    :list="state.list"
    class="scroll"
    :step="0.5"
    hover="true"
  >
    <div class="item" v-for="(item, index) in state.list" :key="index">
      <span>{{ item.title }}</span>
      <span>{{ item.date }}</span>
    </div>
  </vue3-seamless-scroll>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";

const state = reactive({
  list: [
    {
      title: "无缝滚动第一行无缝滚动第一行",
      date: "2017-12-16",
    },
    {
      title: "无缝滚动第二行无缝滚动第二行",
      date: "2017-12-16",
    },
    {
      title: "无缝滚动第三行无缝滚动第三行",
      date: "2017-12-16",
    },
    {
      title: "无缝滚动第四行无缝滚动第四行",
      date: "2017-12-16",
    },
    {
      title: "无缝滚动第五行无缝滚动第五行",
      date: "2017-12-16",
    },
    {
      title: "无缝滚动第六行无缝滚动第六行",
      date: "2017-12-16",
    },
    {
      title: "无缝滚动第七行无缝滚动第七行",
      date: "2017-12-16",
    },
    {
      title: "无缝滚动第八行无缝滚动第八行",
      date: "2017-12-16",
    },
    {
      title: "无缝滚动第九行无缝滚动第九行",
      date: "2017-12-16",
    },
  ],
});
</script>
<style lang='less' scoped>
.scroll {
  height: 200px;
  width: 500px;
  margin: 100px auto;
  overflow: hidden;
}

.scroll .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
}
</style>

vue-seamless-scroll插件在线演示文档
vue-seamless-scroll文档

相关属性

效果

仅供参考

vue实现无缝滚动

方法二：css动画实现无缝滚动

<div class="b_list">
  <div class="b_scroll">
    <div class="b_item" v-for="(ac,acindex) in activityList" :key="acindex">
      <!-- 循环的内容 -->
    </div>
  </div>
</div>

css:使用纯css动画实现数据向上滚动

@keyframes scrollTop {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -300px, 0);
    transform: translate3d(0, -300px, 0);
  }
}
.b_list{
  height: 19rem;
  overflow: hidden;
}
 
.b_scroll{
   -webkit-animation: 10s scrollTop linear infinite normal;
   animation: 10s scrollTop linear infinite normal;
} 

方法三：使用scrollTop方法向上滚动

scrolltolowerOne() {
  this.breakfastScrollInterval = setInterval(() => {
    let div = document.getElementById("breakfastList");
    if (div) {
      if (div.scrollTop + div.offsetHeight >= div.scrollHeight) {
        this.breakfastScrollTop = 0;
      } else {
        this.breakfastScrollTop += 1;
      }
      div.scrollTop = this.breakfastScrollTop;
    } else {
      clearInterval(this.breakfastScrollInterval);
      this.breakfastScrollInterval = null;
    }
  }, 50);
};

方法四：鼠标悬停时暂停滚动并且可以鼠标滚轮滚动（完整代码）

<template>
  <div id="container" @mouseover="stopScroll" @mouseout="resumeScroll">
    <div id="content">
      <!-- 内容 -->
      <p v-for="index in 21" :key="index">This{{ index }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      container: null, // DOM元素
      isHovered: false, //滚动
      scrollInterval: null, // 定时器
    };
  },
  mounted() {
    this.container = document.getElementById('container');
    this.startScroll();
  },
  methods: {
    startScroll() {
      if (!this.isHovered) {
        this.scrollInterval = setInterval(() => {
          this.container.scrollTop += 1; // 向上滚动的速度
          // 获取指定区域的高度
          const elementHeight = this.container.clientHeight;
          // 获取指定区域内文档内容的总高度
          const contentHeight = this.container.scrollHeight;
          // 获取指定区域的滚动位置
          const scrollPosition = this.container.scrollTop;
          // 计算滚动条距离底部的距离
          const distanceToBottom = contentHeight - elementHeight - scrollPosition;
          if (distanceToBottom === 0) {
            this.container.scrollTop = 0;
          }
        }, 50); // 滚动间隔，单位毫秒
      }
    },
    // 当鼠标指针进入后触发
    stopScroll() {
      this.isHovered = true;
      clearInterval(this.scrollInterval);
      this.container.addEventListener('wheel', this.handleWheel);
    },
    // 根据鼠标滚轮事件的滚动距离，将滚动容器的滚动位置向上或向下调整一定的距离
    handleWheel(event) {
      this.container.scrollTop += event.deltaY * 0.2;
      // 阻止浏览器对滚轮事件的默认处理方式
      event.preventDefault();
    },
    // 当鼠标指针离开时触发
    resumeScroll() {
      this.isHovered = false;
      this.container.removeEventListener('wheel', this.handleWheel);
      this.startScroll();
    },
  },
};
</script>

<style scoped>
#container {
  width: 100%;
  height: calc(100% - 21px);
  /* overflow-y: auto; */
  overflow-y: hidden;
}

#content {
  height: 200px; /* 模拟内容比容器高的情况 */
}
</style>