如何解决hover显示div滚动条时内容发生偏移的问题

安全阿岳

2026-10-2

解决方案

方案1：使用原生CSS `scrollbar-gutter` 属性（推荐）

这是CSS标准专门为解决滚动条出现挤压内容问题推出的属性，代码量最小，无hack，兼容性覆盖绝大多数主流浏览器：

div {
  width: 50%;
  margin: 0 auto;
  overflow-y: hidden;
  /* 预留给滚动条固定宽度的位置，内容宽度不会随滚动条显隐变化 */
  scrollbar-gutter: stable;
}

div:hover {
  overflow-y: auto;
}

方案2：自定义悬浮滚动条（无内容挤压、可自定义样式）

如果需要滚动条完全不占用内容宽度，可通过自定义滚动条实现，滚动条会悬浮在内容上层，不会触发内容偏移：

div {
  width: 50%;
  margin: 0 auto;
  overflow-y: hidden;
}

div:hover {
  overflow-y: auto;
}

/* 自定义滚动条样式，适配webkit内核浏览器（Chrome、Edge、Safari等，覆盖95%以上用户） */
div::-webkit-scrollbar {
  width: 8px;
}
div::-webkit-scrollbar-track {
  background: transparent;
}
div::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
}
/* hover时才显示滚动条滑块 */
div:hover::-webkit-scrollbar-thumb {
  background: #c1c1c1;
}
div:hover::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}