vue-seamless-scroll实现自动无缝滚动+鼠标滚轮滚动

首先引入 vue-seamless-scroll

import vueSeamlessScroll from 'vue-seamless-scroll'

 然后使用

<vueSeamlessScroll
          :data="dataRes"
          :class-option="classOption"
          class="levelSrcoll"
          @mousewheel.native="handleScroll"
          ref="vueSeamlessScroll"
          id="div"
        >
          <ul class="tbody" v-for="(item, i) in dataRes" :key="i">
            <li class="lineFeed center" style="width: 14%">{{ item.irank }}</li>
            <li class="lineFeed schoolName" style="width: 29%" :title="item.dataName">{{ item.dataName }}</li>
            <li class="lineFeed" style="width: 19%">{{ item.totalCount }}</li>
            <li class="lineFeed" style="width: 19%">{{ item.dataCount }}</li>
            <li class="lineFeed" style="width: 19%">{{ getPercent(item.percent) }}%</li>
          </ul>
</vueSeamlessScroll>

 变量介绍：

1. dataRes为循环列表
2. classOption为vue-seamless-scroll的配置项
3.  @mousewheel.native="handleScroll"表示在组件的根元素上监听鼠标滚轮事件，并调用handleScroll方法。这种方式确保了事件处理函数只在组件的根元素上触发，而不是在组件内部的所有子元素上触发‌

 然后根据vue-seamless-scroll官网，我们配置classOption，注意要在computed计算属性中配置

  computed: {
    classOption() {
      return {
        step: 0.6, // 数值越大速度滚动越快
        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataRes.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
      }
    },
  },

其他配置请参考官方网站vue-seamless-scroll 

在mounted里调用reset() 重置状态

 mounted() {
    this.$nextTick(() => {
      this.$refs.vueSeamlessScroll.reset()
    })
  },

handleScroll函数书写方法如下

// 滚动代码
   handleScroll(e) {
      // 改变组件内部 yPos 的值，这样html的translate(0, yPos)就会随之改变
      // e.deltaY是滚动的距离
      this.$refs.vueSeamlessScroll.yPos = this.$refs.vueSeamlessScroll.yPos - e.deltaY // 如果是正数 说明是往上滚
      if (this.$refs.vueSeamlessScroll.yPos > 0) {
        this.$refs.vueSeamlessScroll.yPos = 0
        return
      } 
      // 如果yPos超过内部实际高度的一半则重新到顶部滚动 // 一半的原因是因为组件实际上创建了两个dom，以达到无缝衔接的效果
      if (Math.abs(this.$refs.vueSeamlessScroll.yPos) > document.getElementById('div').offsetHeight / 2 - 180) {
        this.$refs.vueSeamlessScroll.yPos = -(document.getElementById('div').offsetHeight / 2 - 180)
      }
   },

注意：这里的180不是固定的需要根据容器的高来定
如果想实现在鼠标滚轮滚定时也保留无缝滚动的效果可以把handleScroll函数这样书写

// 滚动代码
   handleScroll(e) {
      // 改变组件内部 yPos 的值，这样html的translate(0, yPos)就会随之改变
      // e.deltaY是滚动的距离
      this.$refs.vueSeamlessScroll.yPos = this.$refs.vueSeamlessScroll.yPos - e.deltaY // 如果是正数 说明是往上滚
      if (this.$refs.vueSeamlessScroll.yPos > 0) {
        this.$refs.vueSeamlessScroll.yPos = 0
        return
      } 
      // 如果yPos超过内部实际高度的一半则重新到顶部滚动 // 一半的原因是因为组件实际上创建了两个dom，以达到无缝衔接的效果
      if (Math.abs(this.$refs.vueSeamlessScroll.yPos) > this.$refs.vueSeamlessScroll.realBoxHeight / 2)) {
        this.$refs.vueSeamlessScroll.yPos = 0
      }
   },

 这样就可以实现以下的效果了

1. 自动无缝滚动
2. 鼠标进入滚动停止，鼠标移出滚动结束
3. 鼠标滚轮可以控制滚动