Scrollbar width

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-width"; export const description = "Utilities for controlling the width of an element's scrollbar.";

Examples

Using the default scrollbar width

Use the scrollbar-auto utility to use the browser's default scrollbar width:

<!-- [!code classes:scrollbar-auto] -->
<div class="scrollbar-auto overflow-auto ...">
  <!-- ... -->
</div>

Using a thin scrollbar

Use the scrollbar-thin utility to use a thinner scrollbar:

{

The Cerulean Archives occupy three narrow floors above the old observatory, each lined with drawers of star maps, expedition notes, and brass instruments cataloged by hand.

On winter mornings, the staff rolls ladders between the shelves while pale light cuts through the roof windows and settles on the reading tables.

Visitors can request anything from the collection, but most come for the atlases that chart coastlines no longer found on modern maps.

Every returned volume is inspected, dusted, and wrapped before being carried back into the stacks for the next researcher.

}

<!-- [!code classes:scrollbar-thin] -->
<div class="scrollbar-thin overflow-auto ...">
  <!-- ... -->
</div>

Hiding scrollbars

Use the scrollbar-none utility to hide scrollbars while still allowing an element to scroll:

<!-- [!code classes:scrollbar-none] -->
<div class="scrollbar-none overflow-auto ...">
  <!-- ... -->
</div>

These utilities only support the browser keywords auto, thin, and none.

Responsive design