demo · v135

::scroll-button style foundry

Cycle through three preset stylings for the ::scroll-button(*) pseudo — default boxed, round emerald, and huge. The scroller itself is a vanilla flex container; everything you see is rendered by the browser’s built-in scroll buttons.

::scroll-button: ?

Slide 1 — The scroll buttons appear at the edges; arrow keys, Tab, and screen readers all work.

Slide 2 — Pre-135, you had to wire scroll-by JS to do this yourself.

Slide 3 — Now the browser owns the geometry, the accessibility tree, and the keyboard handling.

Slide 4 — You only style the buttons.

Slide 5 — Try arrow keys, Tab, swipe.

see also