在pc端运用overflow-x: scroll;滑动失效问题

在pc端运用overflow-x: scroll;滑动失效，移动端能正常使用

```html
<div style="width: 900px;height: 300px;overflow: hidden;">
                    <div style="display: flex;flex-wrap: nowrap;overflow-x: scroll;">
                        <div  v-for="(item,index) of Nav" :key="index" :class="{active:currentIndex==index}" @click="getclick(item,index)" class="ItemLiat">
                            {{item.title}}
                        </div>
                    </div>
                </div> 

```

你看下滚动条有没有设过样式

循环的div 样式加个flex-shrink: 0;试试

【以下回答由 GPT 生成】

问题分析: 在PC端使用overflow-x: scroll时无法实现滑动效果的原因可能是由于缺少滚动条样式，或者滚动条的宽度不够。一种解决方法是自定义滚动条样式，并为其设置适当的宽度。

解决方案: 您可以使用自定义滚动条样式，并为其设置适当的宽度来解决这个问题。以下是一种可能的解决方案:

1. 创建一个CSS样式表，用于自定义滚动条的样式：

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 8px; /* 设置滚动条宽度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background-color: #888;
}

/* 鼠标悬停在滚动条上时的滑块样式 */
::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

1. 将CSS样式表应用到您的HTML代码中：

<style>
    /* 此处粘贴上面的CSS样式表 */
</style>

<div style="width: 900px;height: 300px;overflow: hidden;">
    <div style="display: flex;flex-wrap: nowrap;overflow-x: scroll;">
        <div v-for="(item,index) of Nav" :key="index" :class="{active:currentIndex===index}" @click="getclick(item,index)" class="ItemLiat">
            {{ item.title }}
        </div>
    </div>
</div>

这样，您应该能够在PC端实现overflow-x: scroll时的滑动效果。如果问题仍然存在，请尝试重新加载页面或清除浏览器缓存。

希望这个解决方案能对您有所帮助！如果还有其他问题，请及时告诉我。