Chrome中鼠标悬停Div时overflow: overlay滚动条失效求助

原因分析 #

Chrome最新版本（从114.x开始）已正式移除对非标准属性overflow: overlay的支持。该属性原本是Chrome独有的实验性特性，从未纳入CSS官方标准，废弃是为了推进标准属性的统一使用。

替代方案 #

方案1：自定义webkit滚动条实现覆盖效果 #

通过::-webkit-scrollbar系列伪元素自定义滚动条样式，让滚动条覆盖在内容上方，不占用布局空间，完美还原原效果：

<div class="content">
  <!-- 长内容区域 -->
</div>
<style>
.content {
  overflow: hidden;
  max-height: 300px; /* 示例高度，可根据需求调整 */
}
.content:hover {
  overflow: auto;
}

/* 自定义滚动条，使其悬浮覆盖内容 */
.content::-webkit-scrollbar {
  width: 10px;
}
.content::-webkit-scrollbar-track {
  background: transparent; /* 轨道透明，不干扰内容显示 */
}
.content::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  /* 通过透明边框+背景裁剪，让滚动条向内偏移，避免挤占布局 */
  border: 3px solid transparent;
  background-clip: content-box;
}
</style>

核心逻辑：用标准的overflow: auto替代overlay，通过自定义滚动条的边框和背景裁剪，实现滚动条悬浮在内容上方的效果，完全不影响原有布局。

方案2：使用scrollbar-gutter避免内容晃动 #

如果不需要严格的覆盖式滚动条，仅需解决内容晃动问题，可使用标准属性scrollbar-gutter：

.content {
  overflow: hidden;
  scrollbar-gutter: stable; /* 提前预留滚动条空间，避免显示时布局偏移 */
}
.content:hover {
  overflow: auto;
}

该属性会为滚动条提前固定预留空间，滚动条显示时不会挤压内容，适合对滚动条样式要求不高但需要稳定布局的场景。

注意事项 #

• ::-webkit-scrollbar系列属性仅适用于webkit内核浏览器（Chrome、Edge等），若需兼容Firefox，可配合scrollbar-width: thin和scrollbar-color属性补充处理。
• 优先使用标准CSS属性，避免依赖非标准特性，减少后续浏览器版本更新带来的兼容性问题。

内容的提问来源于stack exchange，提问作者Ramkumar G