设置overflow: overlay后v-dialog中鼠标滚轮无法滚动问题

问题描述 #

我基于Vuetify的滚动对话框示例修改了代码，唯一改动是给对话框的v-card-text元素添加了overflow-y: overlay样式：

<v-card-text style="height: 300px; overflow-y: overlay">

添加后发现鼠标滚轮无法滚动内容，想知道原因和解决方法。

原因分析 #

• overflow-y: overlay是非标准CSS属性值，仅旧版Chrome浏览器支持，现代浏览器已逐步废弃该属性。
• 该属性设计为让滚动条悬浮在内容上方（不占据布局空间），但在Vuetify对话框组件中，这种非标准的overflow设置会干扰组件内部的事件处理逻辑，导致滚轮事件无法被正确绑定到可滚动元素，进而无法触发滚动。

解决办法 #

使用标准CSS属性替代overlay，同时通过自定义滚动条样式实现类似的视觉效果：

1. 替换为标准属性overflow-y: auto（所有现代浏览器支持，内容超出时自动显示滚动条）：

<v-card-text style="height: 300px; overflow-y: auto">

2. 若需滚动条不占据布局空间（类似overlay的视觉效果），添加自定义滚动条样式：

/* 适配Chrome、Edge等webkit内核浏览器 */
.v-card-text::-webkit-scrollbar {
  width: 8px;
}
.v-card-text::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 4px;
}
.v-card-text::-webkit-scrollbar-track {
  background: transparent;
}

/* 适配Firefox浏览器 */
.v-card-text {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.2) transparent;
}

设置后滚动条会悬浮在内容边缘（不挤压布局），同时滚轮滚动功能可正常工作。

内容的提问来源于stack exchange，提问作者Yue JIN