|
| 1 | +import { ApiTable } from "@/components/api-table.tsx"; |
| 2 | +import { ResponsiveDesign } from "@/components/content.tsx"; |
| 3 | +import { Example } from "@/components/example.tsx"; |
| 4 | +import { Figure } from "@/components/figure.tsx"; |
| 5 | + |
| 6 | +export const title = "scrollbar-gutter"; |
| 7 | +export const description = "Utilities for controlling the gutter space reserved for an element's scrollbar."; |
| 8 | + |
| 9 | +<ApiTable |
| 10 | + rows={[ |
| 11 | + ["scrollbar-gutter-auto", "scrollbar-gutter: auto;"], |
| 12 | + ["scrollbar-gutter-stable", "scrollbar-gutter: stable;"], |
| 13 | + ["scrollbar-gutter-both", "scrollbar-gutter: stable both-edges;"], |
| 14 | + ]} |
| 15 | +/> |
| 16 | + |
| 17 | +## Examples |
| 18 | + |
| 19 | +### Reserving space for the scrollbar |
| 20 | + |
| 21 | +Use the `scrollbar-gutter-stable` utility to reserve space for the scrollbar even when an element isn't overflowing: |
| 22 | + |
| 23 | +<Figure> |
| 24 | + |
| 25 | +<Example> |
| 26 | + { |
| 27 | + <div className="mx-auto grid max-w-xl grid-cols-1 gap-6 text-sm/6 text-gray-600 sm:grid-cols-2 dark:text-gray-300"> |
| 28 | + <div> |
| 29 | + <p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">scrollbar-gutter-auto</p> |
| 30 | + <div className="h-40 overflow-auto rounded-lg bg-gray-50 py-4 scrollbar-gutter-auto dark:bg-white/5"> |
| 31 | + <p className="text-justify"> |
| 32 | + Hey everyone! It’s almost 2027 and we still don’t know if there are aliens living among us, or do we? Maybe |
| 33 | + the person writing this is an alien. You will never know. |
| 34 | + </p> |
| 35 | + </div> |
| 36 | + </div> |
| 37 | + <div> |
| 38 | + <p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">scrollbar-gutter-stable</p> |
| 39 | + <div className="relative h-40 rounded-lg bg-gray-50 py-4 pr-4 scrollbar-gutter-stable dark:bg-white/5"> |
| 40 | + <p className="text-justify"> |
| 41 | + Hey everyone! It’s almost 2027 and we still don’t know if there are aliens living among us, or do we? Maybe |
| 42 | + the person writing this is an alien. You will never know. |
| 43 | + </p> |
| 44 | + <div className="absolute top-0 right-0 bottom-0 w-4 rounded-r-lg border bg-[image:repeating-linear-gradient(315deg,currentColor_0,currentColor_1px,transparent_0,transparent_50%)] bg-[size:8px_8px] bg-top-left text-black/10 dark:text-white/12.5"></div> |
| 45 | + </div> |
| 46 | + </div> |
| 47 | + </div> |
| 48 | + } |
| 49 | +</Example> |
| 50 | + |
| 51 | +```html |
| 52 | +<!-- [!code classes:scrollbar-gutter-stable] --> |
| 53 | +<div class="overflow-auto scrollbar-gutter-stable ..."> |
| 54 | + <!-- ... --> |
| 55 | +</div> |
| 56 | +``` |
| 57 | + |
| 58 | +</Figure> |
| 59 | + |
| 60 | +### Reserving space on both sides |
| 61 | + |
| 62 | +Use the `scrollbar-gutter-both` utility to reserve matching gutter space on both sides of the element: |
| 63 | + |
| 64 | +```html |
| 65 | +<!-- [!code classes:scrollbar-gutter-both] --> |
| 66 | +<div class="overflow-auto scrollbar-gutter-both ..."> |
| 67 | + <!-- ... --> |
| 68 | +</div> |
| 69 | +``` |
| 70 | + |
| 71 | +### Using the default gutter |
| 72 | + |
| 73 | +Use the `scrollbar-gutter-auto` utility to only reserve gutter space when the browser would normally show a scrollbar: |
| 74 | + |
| 75 | +```html |
| 76 | +<!-- [!code classes:scrollbar-gutter-auto] --> |
| 77 | +<div class="overflow-auto scrollbar-gutter-auto ..."> |
| 78 | + <!-- ... --> |
| 79 | +</div> |
| 80 | +``` |
| 81 | + |
| 82 | +### Responsive design |
| 83 | + |
| 84 | +<ResponsiveDesign |
| 85 | + property="scrollbar-gutter" |
| 86 | + defaultClass="scrollbar-gutter-auto" |
| 87 | + featuredClass="scrollbar-gutter-stable" |
| 88 | +/> |
0 commit comments