vue3 封装一个横向滚动条，不显示滚动条，但是可以用手指触摸滚动，需兼容Mac等浏览器，并举例

在 Vue 3 中封装一个横向滚动条，不显示滚动条，但是可以用手指触摸滚动，需要兼容 Mac 等浏览器，可以使用第三方库如 vue-scroller 或 vue-virtual-scroller。

例如：

1. 安装 vue-scroller

npm install vue-scroller

2. 在 main.js 中引入 vue-scroller

import VueScroller from 'vue-scroller'
Vue.use(VueScroller)

3. 在组件中使用 vue-scroller

<template>
  <scroller class="scroller" :options="options">
    <div v-for="item in list" :key="item.id" class="item">{{item.name}}</div>
  </scroller>
</template>

<script>
export default {
  data() {
    return {
      options: {
        scrollbar: false
      },
      list: [
        {id: 1, name: 'item1'},
        {id: 2, name: 'item2'},
        {id: 3, name: 'item3'},
        // ...
      ]
    }
  }
}
</script>

在这里我们通过在options中设置 scrollbar : false 使得滚动条不可见，但是手指触摸可以滚动.

更多使用方法可以参考vue-scroller的文档。