解决滚动条加入/移除而“被挤动”产生布局偏移问题的方案

当滚动条在鼠标移入时才出现或变宽，常见的问题是页面（或容器）内容会因滚动条加入/移除而“被挤动”产生 layout shift。要避免这个现象，可以为滚动条预留空间，从而无论滚动条是否显示，布局都不变。

以下给出两种思路：

---

方法一：使用 scrollbar-gutter (现代浏览器)

现代浏览器正在逐步支持 scrollbar-gutter 属性，可以让滚动条的空间始终被预留，但实际滚动条可以做成“透明”或窄宽度，在鼠标悬停时再改变外观。这样就不会因为滚动条的出现/消失而引起内容被挤压。

示例：

.header-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 87%;

  /* 始终可滚动，但通过 scrollbar-gutter 预留滚动条空间，避免挤压 */
  overflow-y: auto;
  scrollbar-gutter: stable;  /* 或 stable both-edges 取决于需求 */

  background-color: #fff;
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* WebKit 浏览器滚动条美化 */
.header-container::-webkit-scrollbar {
  width: 6px;       /* 保持滚动条占位，以防出现挤压 */
}

/* 初始状态让滚动条滑块透明，仅保留空轨道 */
.header-container::-webkit-scrollbar-thumb {
  background-color: transparent;
}

/* 鼠标移到容器上时，让滚动条滑块显现 */
.header-container:hover::-webkit-scrollbar-thumb {
  background-color: #888; 
}

/* 鼠标移到滚动块上再加深颜色 */
.header-container::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

• scrollbar-gutter: stable; 会在不显示滑块时依然保留与滚动条同样宽度的空白区域，从而避免布局向左/向右抖动。
• 当浏览器暂不支持该属性时，则会退回到默认行为，依旧可能产生轻微挤压问题。可通过在其他地方也固定滚动条空间来兼容老版本。

---

方法二：始终保留滚动条 (用伪“隐藏”方式)

如果需要兼容不支持 scrollbar-gutter 的浏览器，另一种思路是始终在容器里放置滚动条，只是让它在非悬停时看起来“消失”，也就不会产生多余挤压。核心做法是：

1. overflow-y: scroll; 而不是 auto 或 hidden，保证滚动条占位。
2. 使用 CSS 让滚动条的滑块在默认状态下变得透明/极细，只在悬停时变得可见/变宽。

示例：

.header-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 87%;

  /* 注意是 scroll 而非 auto，从而始终存在滚动条槽位 */
  overflow-y: scroll;  

  background-color: #fff;
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 始终占位，但初始时滚动条“看不见” */
.header-container::-webkit-scrollbar {
  width: 6px;          /* 保留滚动条空间，避免挤压 */
}

.header-container::-webkit-scrollbar-thumb {
  background-color: transparent;  /* 默认透明 */
}

/* 鼠标移入容器时，让滑块显现 */
.header-container:hover::-webkit-scrollbar-thumb {
  background-color: #888;
}

.header-container::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

这样做能一劳永逸地避免内容抖动：

• 由于 overflow-y: scroll; 强制滚动条始终占用那 6px 宽度，无论是否真的需要滚动；
• “隐藏”只是通过把滚动条滑块做成透明色，从视觉上看起来好像没有滚动条。

---

总结

• 如果浏览器支持 scrollbar-gutter，可用方法一，让滚动条在需要时出现，但提前留好占位空间。
• 如果需要兼容性更好，则可用方法二，直接使用 overflow-y: scroll;，再用透明滑块假装滚动条不存在，从而保留宽度、避免页面挤压。

这两种思路都能在鼠标移入时“显示”滚动条且避免布局抖动，可根据需求和兼容性偏好进行选择。

相关知识：https://zhuanlan.zhihu.com/p/415618739