vue3 实现一个列表水平居中的同时，可以左右滑动？

Question

vue3 实现一个列表水平居中的同时，可以左右滑动？通过添加display: flex;justify-content: center; 实现了prize-pools-box中元素的居中，但是现在元素无法向左滚动了，vue3 想实现一个列表水平居中的同时，可以左右滑动？ 应该怎么改呢？这个功能需要适配低版本浏览器和低版本手机，有什么兼容的方法吗？

<div class="prize-pools-box">
            <div class="prize-item" :key="index" v-for="(item, index) in 9"></div>
</div>

  .prize-pools-box {
      margin-top: 27px;
      width: 100vw;
      height: 182px;
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      position: relative;
      justify-content: center;
      .prize-item {
        width: 173px;
        height: 182px;
        margin-right: 12px;
}
}

Answer 1

<template>
    <div class="prize-pools-container">
        <div class="prize-pools-box">
            <div v-for="(item, index) in items" :key="index" class="prize-pool-item">
                {{ item }}
            </div>
        </div>
    </div>
</template>
<script setup>
const items= ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7']

</script>
<style>

.prize-pools-container {
    display: flex;
    justify-content: center;
    overflow-x: hidden; /* 防止容器本身滚动 */
}

.prize-pools-box {
    display: flex;
    overflow-x: auto; /* 允许子元素水平滚动 */
    scroll-snap-type: x mandatory; /* 启用滚动捕捉 */
    padding: 0 16px; /* 两端留出一些空间，防止滚动时边缘卡顿 */
    -webkit-overflow-scrolling: touch; /* 使 iOS 设备上的滚动更流畅 */
}

.prize-pool-item {
    flex-shrink: 0; /* 防止子元素缩小 */
    width: 100px; /* 示例宽度，可以根据需要调整 */
    height: 100px; /* 示例高度，可以根据需要调整 */
    margin: 0 8px; /* 子元素之间的间距 */
    background-color: #f0f0f0; /* 示例背景色 */
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start; /* 启用滚动捕捉 */
}
</style>

效果如下