Scroll Gutter

与滚动相关的另一件事是滚动条装订线。 以前面的 例子 为例，当内容变长时，添加滚动条将导致布局偏移。 发生布局偏移的原因是为滚动条保留空间。

關關雎鳩，在河之洲。
窈窕淑女，君子好逑。

參差荇菜，左右流之。
窈窕淑女，寤寐求之。

求之不得，寤寐思服。
悠哉悠哉，輾轉反側。

參差荇菜，左右采之。
窈窕淑女，琴瑟友之。

參差荇菜，左右芼之。
窈窕淑女，鍾鼓樂之。

请注意，当内容因显示滚动条而变长时，内容是如何移动的。 我们可以通过使用属性 scrollbar-gutter 来避免这种行为。

.body {
  scrollbar-gutter: stable;
}

關關雎鳩，在河之洲。
窈窕淑女，君子好逑。

參差荇菜，左右流之。
窈窕淑女，寤寐求之。

求之不得，寤寐思服。
悠哉悠哉，輾轉反側。

參差荇菜，左右采之。
窈窕淑女，琴瑟友之。

參差荇菜，左右芼之。
窈窕淑女，鍾鼓樂之。

scrollbar-gutter: stable 将会预先为 滚动条保留空间。 因此，在计算 内填充 padding 时，应考虑滚动条的宽度，从而适配 UI 效果。