Box
scrollbar-width
scrollbar-width makes scrollbars thinner or hides them. You pick the thickness with a keyword; pixel values are not allowed.
Syntax
auto | thin | nonePreview
Open https://example.com/a/very/long/path to see more. The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。きのうは雨でしたが、けさはよく晴れています。
Presets
Drag the bottom-right corner to resize
Code
.box {
overflow: auto;
scrollbar-width: thin;
}Controls
scrollbar-widththin
Open https://example.com/a/very/long/path to see more. The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。きのうは雨でしたが、けさはよく晴れています。
About
What the values mean
auto: the normal thickness chosen by the browser and OS. This is the initial value.thin: a thinner scrollbar. How thin depends on the browser and OS.none: no scrollbar. The box still scrolls with the wheel, touch or keyboard.
When scrollbars appear
Scrollbars appear on a box with overflow set to auto or scroll when its content overflows. The preview here uses overflow: auto with text that overflows both ways.
Watch out
- It is not inherited. Set it on the scrolling box itself (on
htmlfor the whole page). - With overlay scrollbars that hide while you are not scrolling, as on macOS, the difference is hard to see.
nonemakes it harder to notice that something scrolls. Use it where other cues exist, such as a horizontal carousel.- Chrome and Edge support it from 121, Safari from 18.2. Before that, thickness was changed with the
::-webkit-scrollbarpseudo-elements. In Chrome and Edge, setting scrollbar-width or scrollbar-color to anything other thanautoturns off::-webkit-scrollbarstyles.