Scrollbar

A scrollbar is a track with a thumb in it, and the thumb answers two questions at once. Its position says where you are in the content; its length says how much content there is, because the thumb is as long a fraction of the track as the visible part is of the whole. A thumb filling half the track means one more screenful; a sliver means a very long document. That second reading is why a thumb has a minimum length, and why a bar that ignores the ratio and draws a fixed-size handle has thrown away half of what the control is for. Dragging the thumb sets the position, so the bar reports and controls in the same gesture.

Platforms disagree about whether the bar takes up room. A classic scrollbar sits in the layout and permanently narrows the content beside it. An overlay scrollbar floats over the content and fades out when the pointer leaves, which is what macOS and touch platforms do by default and which is why a scroller can be invisible until you touch it. The overlay style buys space and costs discoverability: with no bar showing, there is nothing to say that a region scrolls at all. The layout hazard is the classic one: a bar that appears when content grows past the box shifts everything beside it, which scrollbar-gutter: stable fixes by reserving the space whether or not a bar is drawn.

Restyling is legitimate, replacing usually is not. CSS offers scrollbar-width and scrollbar-color, which respect the platform’s own behaviour, and hand-built bars should be measured against what they are giving up: keyboard scrolling, a real hit target (a hairline thumb is a fine looking, unclickable control), click-in-track paging, the platform’s fade timing, and the way an assistive technology already understands a real scroll container. Whatever the bar looks like, the region under it must stay reachable by keyboard, which for a div that scrolls means it needs to be focusable so arrow keys reach it at all. Do not confuse the bar with the two things that ride alongside it: a reading progress indicator reports position through a document as a fraction of a task, and scroll spy answers which section you are in by name. The scrollbar is the one that also lets you change the answer.