v135 · css

::scroll-button() pseudo elements

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

concepts

  1. ::scroll-button() in the wild

    Live carousel with prev/next pseudo-element buttons generated from the scroller; falls back to wired-up buttons on non-Chrome 135 so you can compare.

  2. Keyboard, focus, announced direction

    The accessibility argument from the Open UI explainer: tab into the carousel, Enter/Space to scroll, and confirm the buttons announce direction and disable at the edges automatically.

  3. ::scroll-button style foundry

    Cycle through three preset stylings for ::scroll-button(*) — boxed, round emerald, huge — on the same flex carousel. The buttons, their keyboard handling, and the edge-disable logic stay built-in.

  4. Gallery Navigator

    Horizontal snap-scroll card gallery with ::scroll-button(left) and ::scroll-button(right) pseudo-element navigation. Configure button background, size, and shape live and see the generated CSS.

  5. Vertical article navigator

    A snap-scroll article with ::scroll-button(up) and ::scroll-button(down) showing the vertical use case — distinct from the horizontal carousel demos. Paginates through long-form article sections with four button style presets and auto-disable at start/end.

why it shipped

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

references