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

在 Vue 3 中封装一个横向滚动条，不显示滚动条但可以用手指触摸滚动，可以使用 CSS 和 JavaScript 来实现。

首先，使用 CSS 设置滚动容器的 overflow-x 为 scroll，并隐藏滚动条：

.scroll-container {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  overflow-y: hidden;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

然后在 JavaScript 中使用 addEventListener 监听触摸事件，实现手指触摸滚动：

mounted() {
  this.$refs.scrollContainer.addEventListener('touchstart', this.handleTouchStart);
  this.$refs.scrollContainer.addEventListener('touchmove', this.handleTouchMove);
},
methods: {
  handleTouchStart(event) {
    this.startX = event.touches[0].clientX;
  },
  handleTouchMove(event) {
    event.preventDefault();
    const currentX = event.touches[0].clientX;
    const diffX = this.startX - currentX;
    this.$refs.scrollContainer.scrollLeft += diffX;
    this.startX = currentX;
  },
},

示例中，我们通过ref获取滚动容器的dom元素，绑定了触摸开始和触摸移动事件。

完整示例：

<template>
  <div ref="scrollContainer" class="scroll-container">
    <div v-for="item in items" :key="item">{{ item }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startX: 0,
      items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    };
  },
  mounted() {
    this.$refs.scrollContainer.addEventListener('touchstart', this.handleTouchStart);
    this.$refs.scrollContainer.addEventListener('touchmove', this.handleTouchMove);
  },
  methods: {
    handleTouchStart(event) {
      this.startX = event.touches[0].clientX;
    },
    handleTouchMove(event) {
      event.prevent