---
title: "Page scrollbar restyled or hidden (ui/page-scrollbar)"
description: "The native page scrollbar is how people see where they are and how much is left."
url: http://localhost:4173/rules/ui/page-scrollbar
updated: 2026-11-11
---

# Page scrollbar restyled or hidden

> `ui/page-scrollbar` is a vetd rule. It flags: Page scrollbar restyled or hidden. It runs on every `check`, together with the TypeScript check.

| Fact | Value |
| --- | --- |
| Rule id | `ui/page-scrollbar` |
| Severity | warning |
| Group | Interface craft: accessibility, motion and mobile |
| Tags | accessibility |

## Why it matters

The native page scrollbar is how people see where they are and how much is left.

## How to fix it

Style scrollbars only on small inner scroll areas.

## Credit

Based on work by:

- [Rauno Freiberg](https://x.com/raunofreiberg): Posted the scrollbar-width: thin tip for making scrollbars quieter on inner scroll areas such as sheets.

## References

- [scrollbar-width](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scrollbar-width), MDN Web Docs
- [::-webkit-scrollbar](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::-webkit-scrollbar), MDN Web Docs

## See it

Demos in the vetd Lab:

- [Make scrollbars thin and quiet](http://localhost:4173/lab/rauno-freiberg/thin-scrollbars)

## Related rules

- [`ui/user-select-page`](http://localhost:4173/rules/ui/user-select-page.md)

## Get this text from vetd

MCP: call `explain` with `{ "diagnosticId": "ui/page-scrollbar" }`. CLI: `npx vetd explain ui/page-scrollbar`.

---

[All 92 rules](http://localhost:4173/rules.md) · Previous: [`ui/user-select-page`](http://localhost:4173/rules/ui/user-select-page.md) · Next: [`ui/reduced-motion`](http://localhost:4173/rules/ui/reduced-motion.md)