Note: Vue is an example of seamless scrolling based on vue-seamless-scroll

1. Install vue-seamless-scroll

npm install vue-seamless-scroll --save　　

2. Introduce components

import vueSeamlessScroll from 'vue-seamless-scroll'
 
components: {
    
    
        vueSeamlessScroll 
},　

3. Configuration parameters

computed: {
    
    
        defaultOption () {
    
    
            return {
    
    
                step: 0.4, // 数值越大速度滚动越快
                limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            }
       }
},

4. Use of plug-ins

<vue-seamless-scroll :data="listData" :class-option="defaultOption" class="seamless-warp">
   <ul>
      <li  v-for="(item,index) in listData" :key="index">
      </li>
   </ul>
</vue-seamless-scroll>

Finally, seamless scrolling can be achieved

5. BUG
5.1 @click fails

<vue-seamless-scroll :data="listData" :class-option="defaultOption" class="seamless-warp">
   <ul>
      <li  v-for="(item,index) in listData" :key="index" @click="clickload(item)">
      </li>
   </ul>
</vue-seamless-scroll>

When the data in ul1 has not been scrolled, the click event in the ul2 part does not work, and the function cannot be implemented

The solution is through js event delegation

<vue-seamless-scroll :data="listData" :class-option="defaultOption" class="seamless-warp">
   <ul  @click="openDialog($event)">
      <li  v-for="(item,index) in listData" :key="index" :data-item="item">
      </li>
   </ul>
</vue-seamless-scroll>

When the click event is triggered, the
event.target in the event can print out the subtag

data-id that currently triggers this event in the console.log. The data-id is a custom attribute, so the method we get is dataset.