vue3中無法使用 vue-seamless-scroll，作者還沒有發(fā)布vue3版本的
github issues中有提到一個解決方法，是某個作者推薦的封裝方法，但是我更傾向于使用js版的seamless-scroll作為臨時替代方案。

npm install seamscroll --save

SeamlessScroll.vue: 可以直接拷貝

<template>
  <div class="scroll-wrap">
    <slot></slot>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive } from 'vue';
import { init } from 'seamscroll/src';

console.log('8888', init);

export default defineComponent({
  name: 'seamlessScroll',
  components: {},
  props: {
    id: {
      type: String,
      default: '',
    },
    classOption: {
      type: Object,
      default: {
        step: 1, //速度
        hoverStop: true, //鼠標(biāo)停止
        direction: 1, //0 下 1 上 2 左 3 右
      },
    },
  },
  setup(props) {
    const data = reactive({});
    const methods = {
      checkChange(val: number) {},
    };
    onMounted(() => {
      setTimeout(() => {
        console.log(props.id);
        const config = Object.assign(
          {},
          {
            dom: document.getElementById(props.id),
          },
          props.classOption,
        );
        init(config);
      }, 100);
    });
    return {
      data,
      ...methods,
    };
  },
});
</script>

<style lang="scss" scoped>
.scroll-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
</style>

使用：

<SeamlessScroll
      class="scroll-content"
      :class="{ scrollHeight: !needTitle }"
      :class-option="classOption"
      :id="data.id"
    >
  <ul class="dl-scroll" :id="data.id">
    <li>自己寫</li>
  </ul>
</SeamlessScroll>

注意：如果多個滾動 data.id 需要保證唯一性，可以用Math.random()等方式去生成