Scroll area

A region that scrolls, with its scrollbar made as a machined rail: a groove cut into the plate and a thumb like a fader cap riding in it. Scrolling itself is the browser’s own.

Scroll it with the wheel, a drag on the cap, or the keyboard: click in and use the arrows, Page Up and Down, Space, Home and End.

• The keyboard scrolls what it can focus: an area with no focusable control in it takes tabindex="0", and role="region" with an aria-label tells a screen reader what it is.
• It is the browser’s own scrolling, so the wheel, touch, momentum, Page Up and Down, Space and find-in-page work as people expect; nothing is intercepted.
• Focus shows as a 2px ring inside the edge, so a parent that clips its children cannot hide it.
• The edge shade is a second cue that there is more; on touch screens, where the rail is hidden, it is the only one.
• Smooth scrolling is on unless reduced motion is asked for.