CSS解决可滚动div出现滚动条时内容跳动问题（非html/body）

这个问题我之前做项目时也碰到过，确实挺影响体验——滚动条突然冒出来把内容挤得移位，尤其是动态加载内容的场景下更明显。好在现在有个专门的CSS属性能完美匹配你的所有需求：纯CSS实现、仅在需要时显示滚动条、针对单个div而非全局页面。

核心解决方案：使用scrollbar-gutter属性 #

这个CSS属性的作用是提前为滚动条预留固定空间，不管滚动条是否出现，容器的内容区域宽度都保持不变。当滚动条需要显示时，它只会占用预留好的空间，不会挤压原有内容，自然就不会出现跳动的情况了。

具体代码实现 #

给你的可滚动div添加以下CSS样式：

.scrollable-div {
  overflow-y: auto;
  /* 关键属性：为垂直滚动条预留稳定空间 */
  scrollbar-gutter: stable;
  /* 以下是可选的基础样式，根据你的实际需求调整 */
  width: 300px;
  height: 250px;
  border: 1px solid #eee;
  padding: 12px;
}

如果你的场景需要同时为水平滚动条也预留空间（不过你这里是垂直滚动，一般用不上），可以改成：

scrollbar-gutter: stable both;

原理说明 #

默认情况下，浏览器会在滚动条出现时临时减少容器的可用宽度（减去滚动条的宽度），这就导致内容被挤压移位。而scrollbar-gutter: stable会让浏览器提前为滚动条保留好宽度，内容区域的宽度始终固定，滚动条只是覆盖在预留的空间内，完全不影响原有布局。

兼容性说明 #

这个属性已经被现代主流浏览器支持：Chrome 94+、Firefox 93+、Edge 94+、Safari 15.4+，如果你的项目不需要兼容特别老旧的浏览器，这就是最优解。

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