Scrollbar gutter

import { ApiTable } from "@/components/api-table.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx";

export const title = "scrollbar-gutter"; export const description = "Utilities for controlling the gutter space reserved for an element's scrollbar.";

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>

Responsive design