Scroll Gutter
约 572 字大约 2 分钟
2023-08-08
Scroll Gutter
与滚动相关的另一件事是滚动条装订线。 以前面的 例子 为例，当内容变长时，添加滚动条将导致布局偏移。 发生布局偏移的原因是为滚动条保留空间。
關關雎鳩，在河之洲。
窈窕淑女，君子好逑。
參差荇菜，左右流之。
窈窕淑女，寤寐求之。
求之不得，寤寐思服。
悠哉悠哉，輾轉反側。
參差荇菜，左右采之。
窈窕淑女，琴瑟友之。
參差荇菜，左右芼之。
窈窕淑女，鍾鼓樂之。
请注意，当内容因显示滚动条而变长时，内容是如何移动的。 我们可以通过使用属性 scrollbar-gutter 来避免这种行为。
.body {
scrollbar-gutter: stable;
}關關雎鳩，在河之洲。
窈窕淑女，君子好逑。
參差荇菜，左右流之。
窈窕淑女，寤寐求之。
求之不得，寤寐思服。
悠哉悠哉，輾轉反側。
參差荇菜，左右采之。
窈窕淑女，琴瑟友之。
參差荇菜，左右芼之。
窈窕淑女，鍾鼓樂之。
scrollbar-gutter: stable 将会预先为 滚动条保留空间。 因此，在计算 内填充 padding 时，应考虑滚动条的宽度，从而适配 UI 效果。