DocsUtilitiesThin Scrollbars

Thin Scrollbars

Keep native scrolling visible and usable while sharing a small tokenized scrollbar treatment.

Example

Activity row 1: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 2: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 3: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 4: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 5: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 6: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 7: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 8: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 9: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 10: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 11: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 12: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 13: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 14: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 15: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 16: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 17: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 18: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 19: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 20: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 21: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 22: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 23: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 24: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 25: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 26: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 27: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 28: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 29: wheel, drag, touch, and keyboard scrolling remain native.

Activity row 30: wheel, drag, touch, and keyboard scrolling remain native.

scrollbar-width: thin · scrollbar-color: tokenized

Contract

The portable contract is scrollbar-width: thin plus tokenized scrollbar-color. Pixel size, gap, radius, and hover paint are best-effort WebKit enhancements. The utility never sets overflow or hides a scrollbar.

Forced colors restore auto size and palette so the user agent owns the scrollbar.