demo · v132

Gallery + vertical — all four directions in CSS

The pseudo accepts left / right / up / down and the :disabled state styles itself when the scroller can't move further. An image gallery with horizontal buttons and a vertical numeric stack with up/down — both auto-disable at the ends.

checking ::scroll-button()…

image gallery (left / right)

vertical (up / down)

01
02
03
04
05
06
.gallery::scroll-button(left)  { content: "\2190"; }
.gallery::scroll-button(right) { content: "\2192"; }
.v::scroll-button(up)    { content: "\2191"; }
.v::scroll-button(down)  { content: "\2193"; }
.scroller::scroll-button(*):disabled { opacity: 0.35; }

see also