vue实现无缝滚动（vue-seamless-scroll插件、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文档

相关属性

key	description	default	val
step	数值越大速度滚动越快	1	Number
limitMoveNum	开启无缝滚动的数据量	5	Number
hoverStop	是否启用鼠标hover控制	true	Boolean
direction	方向 0 往下 1 往上 2向左 3向右	1	Number
openTouch	移动端开启touch滑动	true	Boolean
singleHeight	单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1	0	Number
singleWidth	单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3	0	Number
waitTime	单步停止等待时间(默认值1000ms)	1000	Number
switchOffset	左右切换按钮距离左右边界的边距(px)	30	Number
autoPlay	1.1.17 版本前手动切换时候需要置为false	true	Boolean
switchSingleStep	手动单步切换step值(px)	134	Number
switchDelay	单步切换的动画时间(ms)	400	Number
switchDisabledClass	不可以点击状态的switch按钮父元素的类名	disabled	String
isSingleRemUnit	singleHeight and singleWidth是否开启rem度量	false	Boolean
navigation	左右方向的滚动是否显示控制器按钮，true的时候autoPlay自动变为false	false	Boolean

效果

仅供参考

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>