npm install vue-seamless-scroll --save

import vueSeamlessScroll from "vue-seamless-scroll";

<vueSeamlessScroll
   :data="vehicleRecordListData"
   class="seamless-warp"
   :class-option="defaultOption"
 >
   <ul class="item">
      <li
           v-for="(item, index) in vehicleRecordListData"
           :key="index"
        >
                        <span class="title" v-text="item.inAutoPlate"></span>
                        <span class="date" v-text="item.vehicleCategory"></span>
                        <span class="date" v-text="item.isInOrOut"></span>
                        <span>{{ item.inOrOutTime | dateFormatValue }}</span>
                        <span>{{ item.inOrOutType }}</span>
                        <span>{{ item.inOrOutLaneName }}</span>
                      </li>
                    </ul>
                  </vueSeamlessScroll>

<template>
  <div class="scroll-container" id="scrollContainer">
    <Scroll :id="'service'">
      <template>
        <!-- <div v-for="(item,idx) in scrollListData" :key="idx + 'n'" class="service" @click="rowClick(item)">
          {{item.name}}
        </div> -->
        <ul>
          <li v-for="(item,idx) in scrollListData" :key="idx + 'n'" class="service" @click="rowClick(item)">
            <div class="service-chaild">{{ item.name }}</div>
            <div class="service-chaild">{{ item.value }}</div>
          </li>
        </ul>
      </template>
    </Scroll>
  </div>
</template>
<script>
  import Scroll from "@/components/HelloWorld";
  export default {
    name: 'TestPage',
    components: {
      Scroll
    },
    data() {
      return {
        scrollListData: [{
            name: '嘉興',
            value: '5555'
          },
          {
            name: '上海',
            value: '5555'
          },
          {
            name: '蘇州',
            value: '5555'
          },
          {
            name: '南京',
            value: '5555'
          },
          {
            name: '嘉興',
            value: '5555'
          },
          {
            name: '上海',
            value: '5555'
          },
          {
            name: '蘇州',
            value: '5555'
          },
          {
            name: '南京',
            value: '5555'
          },
          {
            name: '嘉興',
            value: '5555'
          },
          {
            name: '上海',
            value: '5555'
          },
          {
            name: '蘇州',
            value: '5555'
          },
          {
            name: '南京',
            value: '5555'
          }
        ]
      };
    },
    methods: {
      rowClick(row) {
        console.log(row, 'row ==================')
      }
    },
  };
</script>
<style>
  .scroll-container {
    height: 200px;
    width: 200px;
    margin-bottom: 20px;
  }
  .service {
    font-size: 12px;
    line-height: 18px;
    cursor: pointer;
    display: flex;
  }
  .service:nth-child(odd) {
    background: yellow;
  }
  .service:nth-child(even) {
    background: orange;
  }
  .service-chaild {
    height: 50px;
  }
</style>

<template>
  <div class="scrollContainer" :id="id" @mouseenter="monseenter" @mouseleave="mouseleave">
    <slot></slot>
  </div>
</template>
<script>
  export default {
    name: 'ScrollList',
    props: {
      id: String
    },
    data() {
      return {
        timer: null
      };
    },
    methods: {
      init() {
        this.setTimer();
        // this.$once代表只執(zhí)行一次。如果組件是在keep-alive中包裹，則需要更換函數(shù)
        // 被keep-alive包裹住的組件有兩個生命周期函數(shù)：activated和deactivated
        this.$once('hook:beforeDestroy', () => {
          this.removeTimer();
        });
      },
      removeTimer() {
        if (this.timer) {
          clearInterval(this.timer);
          this.timer = null;
        }
      },
      setTimer() {
        this.removeTimer();
        this.timer = setInterval(() => {
          // pixel height：include el and padding    read only
          const scrollHeight = document.getElementById(this.id).scrollHeight;
          // visible area height：include el and padding  read only
          const clientHeight = document.getElementById(this.id).clientHeight;
          const heightDifference = scrollHeight - clientHeight;
          // scroll height：readable and writable
          document.getElementById(this.id).scrollTop++;
          // when el scroll to top
          if (document.getElementById(this.id).scrollTop >= heightDifference - 1) {
            this.removeTimer();
            // make it go back to original location after one second
            setTimeout(() => {
              document.getElementById(this.id).scrollTop = 0;
              this.setTimer();
            }, 1000);
          }
        }, 44);
      },
      monseenter() {
        this.removeTimer();
      },
      mouseleave() {
        this.setTimer();
      }
    },
    mounted() {
      this.init();
    }
  };
</script>
<style>
  .scrollContainer::-webkit-scrollbar {
    width: 4px;
    background: aliceblue;
  }
  .scrollContainer::-webkit-scrollbar-thumb {
    background: palevioletred;
    border-radius: 5px;
  }
  .scrollContainer {
    height: 100%;
    overflow: scroll;
    overflow-x: hidden;
  }
  /* // 兼容IE */
  .scrollContainer {
    /*三角箭頭的顏色*/
    scrollbar-arrow-color: #fff;
    /*滾動條滑塊按鈕的顏色*/
    scrollbar-face-color: #0099dd;
    /*滾動條整體顏色*/
    scrollbar-highlight-color: #0099dd;
    /*滾動條陰影*/
    scrollbar-shadow-color: #0099dd;
    /*滾動條軌道顏色*/
    scrollbar-track-color: #0066ff;
    /*滾動條3d亮色陰影邊框的外觀顏色——左邊和上邊的陰影色*/
    scrollbar-3dlight-color: #0099dd;
    /*滾動條3d暗色陰影邊框的外觀顏色——右邊和下邊的陰影色*/
    scrollbar-darkshadow-color: #0099dd;
    /*滾動條基準顏色*/
    scrollbar-base-color: #0099dd;
  }
</style>