如何实现鼠标悬停容器时显示滚动条且不影响内容对齐

问题原因分析 #

• overflow:overlay 是WebKit内核浏览器的私有属性，滚动条会覆盖在内容之上，不占用容器宽度，但Firefox等非WebKit浏览器不支持该属性；
• 直接使用 overflow:auto 触发hover显示滚动条时，滚动条会占用容器宽度，导致内部内容的可用空间变化，进而出现文本对齐偏移的问题。

解决方案1：提前预留滚动条空间 #

通过给容器预设滚动条宽度的内边距，确保滚动条显示时不会挤压内容空间，保持布局稳定。

.container {
  overflow: hidden;
  /* 预留标准滚动条宽度（17px为通用值，适配多数系统） */
  padding-right: 17px;
  /* 设置容器最大高度，触发内容溢出 */
  max-height: 200px;
}

.container:hover {
  overflow: auto;
}

/* 可选：针对WebKit浏览器自定义滚动条，模拟overlay视觉效果 */
.container::-webkit-scrollbar {
  width: 17px;
}

.container::-webkit-scrollbar-track {
  background: transparent;
}

.container::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  /* 通过透明边框让滚动条不占用内容空间，还原overlay的视觉体验 */
  border: 6px solid transparent;
  background-clip: content-box;
}

原理说明：
默认状态下容器预留17px右侧内边距，内容的可用宽度为容器宽度减去17px；hover时切换为overflow:auto，滚动条会填充到预留的内边距区域，内部内容的可用宽度保持不变，彻底避免偏移问题。同时通过WebKit滚动条样式优化，在Chrome等浏览器中保持和overflow:overlay一致的视觉效果。

解决方案2：内层容器适配宽度 #

通过嵌套内层容器，让内容区域宽度提前适配滚动条占用的空间，同样可以避免布局偏移。

<div class="container">
  <div class="content">
    <!-- 你的内容 -->
  </div>
</div>

.container {
  overflow: hidden;
  max-height: 200px;
}

.container:hover {
  overflow: auto;
}

.content {
  /* 内层容器宽度比外层多滚动条宽度，抵消滚动条占用的空间 */
  width: calc(100% + 17px);
}

原理说明：
内层容器宽度设置为外层容器宽度加17px，当滚动条显示时，外层容器的可用宽度为自身宽度减去17px，刚好和内层容器的内容可视区域匹配，因此内容不会出现偏移。

这两种方案均兼容所有主流浏览器（Chrome、Firefox、Safari、Edge等），完美解决原代码的兼容性和布局偏移问题。

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