v132 · css

::scroll-button() pseudo elements

Allow the creation of interactive scroll buttons as pseudo-elements, e.g.

concepts

  1. ::scroll-button()

    Declarative previous/next buttons for scroll-snap carousels.

  2. gallery + vertical

    All four directions and the auto-applied :disabled state, in a real image gallery + vertical stack.

  3. Carousel Navigation

    Two carousels styled purely with ::scroll-button(inline-start/end) — no JavaScript needed. Side-by-side before/after showing how much boilerplate the pseudo-element replaces.

  4. orientation modes

    All four direction families — physical left/right, physical up/down, logical inline-start/end, logical block-start/end — demoed side-by-side with snippets.

  5. Data Table Nav

    A wide data table with ::scroll-button(inline-start/end) arrows for keyboard-accessible horizontal navigation. The browser automatically disables the left arrow at the start and the right arrow at the end — no JS click handlers, no manual scroll event listener to disable buttons at the edges.

why it shipped

Allow the creation of interactive scroll buttons as pseudo-elements, e.g.

references