vue3 横向滚动

Vue3 中可以使用 CSS 的 `scroll-snap-type` 属性和 `scroll-snap-align` 属性来实现横向滚动。下面是一个简单的示例：

<template>
  <div class="scroll-container">
    <div class="scroll-item" v-for="(item, index) in items" :key="index">{{ item }}</div>
  </div>
</template>

<style>
.scroll-container {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x proximity;
}

.scroll-item {
  scroll-snap-align: center;
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin-right: 10px;
}
</style>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
    };
  },
};
</script>

在 CSS 中，我们将 `scroll-container` 设置为 `display: flex` 和 `overflow-x: scroll`，使其具有横向滚动的能力。接着，我们使用 `scroll-snap-type` 属性来指定滚动类型为 `x proximity`，表示元素在滚动时会自动对齐到最近的滚动位置。最后，我们使用 `scroll-snap-align` 属性来指定元素的对齐方式为居中对齐，这样每个元素就会自动居中对齐到滚动位置。

注意，这种方法需要浏览器支持 `scroll-snap-type` 和 `scroll-snap-align` 属性。如果需要兼容老版本的浏览器，可以考虑使用 JavaScript 库来实现横向滚动。