← Back to release summary

::scroll-button() pseudo elements

Category
CSS
Type
New or changed feature
Status
Enabled by default (Chrome 135)
Intent stage
None

Summary

Allow the creation of interactive scroll buttons as pseudo-elements, e.g. .scroller { overflow: auto; } .scroller::scroll-button(inline-start) { content: "<"; } .scroller::scroll-button(inline-end) { content: ">"; } These should be focusable, behaving as a button (including their UA styles). When activated, a scroll should be performed in the direction by some amount. When it is not possible to scroll in that direction, they should be disabled (and styled via :disabled), otherwise they are enabled (and styled via :enabled). Selector allows to define buttons in four logical directions: block-start, block-end, inline-start, inline-end; as well as four physical directions: up, down, left, right.

Standards & signals

Explainers: https://github.com/w3c/csswg-drafts/blob/main/css-overflow-5/carousel-explainer.md

View on chromestatus.com