demo · v132

Four orientation modes side-by-side

::scroll-button() accepts left, right, up, down, inline-start, inline-end, block-start, block-end. Logical variants follow writing-mode. See all of them in action.

checking support…

physical: left / right

::scroll-button(left) and (right)

1
2
3
4
5
6
.scroller::scroll-button(left)  { content: "<<"; }
.scroller::scroll-button(right) { content: ">>"; }

physical: up / down

::scroll-button(up) and (down)

1
2
3
4
5
6
.scroller::scroll-button(up)   { content: "^"; }
.scroller::scroll-button(down) { content: "v"; }

logical: inline-start / inline-end

flips with writing-mode — RTL gets mirrored

Same selector spelling, different visual side under direction: rtl or writing-mode: vertical-rl.

.scroller::scroll-button(inline-start) { ... }
.scroller::scroll-button(inline-end)   { ... }

logical: block-start / block-end

vertical scroll, writing-mode aware

In horizontal writing modes this is top/bottom. In vertical writing modes it follows the block axis — ::scroll-button(block-start) is automatically on the leading edge.

.scroller::scroll-button(block-start) { ... }
.scroller::scroll-button(block-end)   { ... }

see also