如何保证含有滚动条的元素两侧边距一致
#CSS 2024/10/14 00:14:29
在前端开发设计中，经常遇到由于滚动条的出现导致的页面跳动或者元素的边距不一致的问题，现在使用 scrollbar-gutter 这个 CSS 属性通过为滚动条预留空间的方法来解决这个问题，尽管这样会不可避免地增加元素内边距，但是应该能够应付一些场景了。
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi neque
praesentium eaque, fuga aliquam, tempore aperiam voluptate quod
alias corporis perferendis. Quidem voluptates sapiente quaerat
praesentium quos fugit non cupiditate.
scrollbar-gutter: stable;
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, vel
esse delectus magni perspiciatis quos voluptate totam id saepe iste.
Dolorum minus architecto ratione, ipsa beatae suscipit recusandae
quisquam sed.
scrollbar-gutter: stable both-edges;
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Consequuntur, dolores a in doloremque laborum placeat alias
deserunt, nesciunt laudantium optio exercitationem eveniet ab
dolorum. Aliquid illum provident id in quo.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint officia
labore asperiores incidunt beatae odio assumenda mollitia numquam!
Animi aspernatur sequi similique recusandae beatae illo magnam soluta
distinctio! Facilis, asperiores. Quas nisi ex consequuntur labore
corporis velit fugit atque maxime dolorem assumenda officia, maiores
vel enim quod omnis iste iusto! Illo voluptatibus praesentium sit
quisquam officia explicabo ut possimus necessitatibus?
scrollbar-gutter: stable;
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint officia
labore asperiores incidunt beatae odio assumenda mollitia numquam!
Animi aspernatur sequi similique recusandae beatae illo magnam soluta
distinctio! Facilis, asperiores. Quas nisi ex consequuntur labore
corporis velit fugit atque maxime dolorem assumenda officia, maiores
vel enim quod omnis iste iusto! Illo voluptatibus praesentium sit
quisquam officia explicabo ut possimus necessitatibus?
scrollbar-gutter: stable both-edges;
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint officia
labore asperiores incidunt beatae odio assumenda mollitia numquam!
Animi aspernatur sequi similique recusandae beatae illo magnam soluta
distinctio! Facilis, asperiores. Quas nisi ex consequuntur labore
corporis velit fugit atque maxime dolorem assumenda officia, maiores
vel enim quod omnis iste iusto! Illo voluptatibus praesentium sit
quisquam officia explicabo ut possimus necessitatibus?
发现还有另外两个关于 scrollbar 的 CSS 属性，scrollbar-color 和 scrollbar-width。
scrollbar-color: gray transparent;gray 应用滚动条滑块颜色，transparent 应用滚动条背景颜色。scrollbar-width: auto/thin/none;
scrollbar-*的属性在 Chrome 和 Firefox 上已经完全支持，Safari 目前还在试验阶段。
参考链接：