滚动条出现时不占用 `div` 空间

在滚动条出现时不占用 div 空间，通常可以通过 CSS 中的 scrollbar-gutter 属性来控制。以下是实现方式：

div {
  width: 100%;
  height: 300px;
  overflow-y: auto;
  scrollbar-gutter: stable; /* 保证滚动条出现时不会改变布局 */
}

解释：

• scrollbar-gutter: stable;：这个属性确保滚动条出现时不会改变 div 的内容宽度，避免布局抖动。它会预留滚动条的空间，即使滚动条没有出现也不会影响布局。

如果浏览器不支持 scrollbar-gutter，可以使用 overflow: overlay;，不过注意这个属性在某些浏览器可能有兼容性问题：

div {
  width: 100%;
  height: 300px;
  overflow-y: overlay; /* 滚动条不会占用空间 */
}

这两种方式都可以避免滚动条的出现影响 div 的布局。