scrollbar-gutter
En esta página
| Clase | Propiedades CSS |
|---|---|
scrollbar-gutter-auto |
scrollbar-gutter: auto; |
scrollbar-gutter-stable |
scrollbar-gutter: stable; |
scrollbar-gutter-both |
scrollbar-gutter: stable both-edges; |
Examples#
Reserving space for the scrollbar#
Use the scrollbar-gutter-stable utility to reserve space for the scrollbar even when an element isn't overflowing:
{
scrollbar-gutter-auto
Hey everyone! It’s almost 2027 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.
scrollbar-gutter-stable
Hey everyone! It’s almost 2027 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.
<!-- [!code classes:scrollbar-gutter-stable] -->
<div class="scrollbar-gutter-stable overflow-auto ...">
<!-- ... -->
</div>
Reserving space on both sides#
Use the scrollbar-gutter-both utility to reserve matching gutter space on both sides of the element:
<!-- [!code classes:scrollbar-gutter-both] -->
<div class="scrollbar-gutter-both overflow-auto ...">
<!-- ... -->
</div>
Using the default gutter#
Use the scrollbar-gutter-auto utility to only reserve gutter space when the browser would normally show a scrollbar:
<!-- [!code classes:scrollbar-gutter-auto] -->
<div class="scrollbar-gutter-auto overflow-auto ...">
<!-- ... -->
</div>