[css-overflow-5] Scroll button pseudo-elements (original) (raw)

As part of #9745 I propose adding a pseudo-element which can be created on a scrolling container to provide a button which navigates that scroller. This is a common pattern, typically requiring that developers manually create elements with script to drive these interactions.

Explainer: https://github.com/flackr/carousel/tree/main/scroll-button

E.g. from https://flackr.github.io/carousel/examples/scroll-button/

.scroller { overflow: auto; } .scroller::scroll-up-button { content: "⬆️"; } .scroller::scroll-down-button { content: "⬇️"; }

For a more practical example, see the implicit creation of markers in the carousel demo.

Having these pseudo-elements allows developers to further reduce the amount of extra markup elements they need to add specifically for controls and make their page contents more about the semantics, e.g. a list of content. They can also easily trigger the buttons' presence depending on a state or media query.

Some questions for consideration / resolution:

  1. Should the direction be part of the name or a parameter to a common pseudo-element name, e.g. scroll--button or scroll-button()? My preference is actually for the latter. This may also allow for styling of all scroll-buttons with a single selector.
  2. What is the focus / tree order of these buttons? Naively I would think following the block direction, then inline direction, e.g. up, left, scroller, scroller::before, scroller contents, scroller::after, right, down. That said, there are some designs where the scroll buttons are next to each other in focus order, e.g. the aria apg demo and @argyleink's carousel has them next to each other in focus order despite being visually apart.
  3. Can we use logical directions? Hopefully yes!
  4. How far should clicking one scroll? I think if the scroller has mandatory snap in the scroll axis it should scroll to the next snap area in that axis. Otherwise, I think the most reasonable would be to scroll by a "page" at a time (i.e. the equivalent of the page-up / page-down buttons, typically 85% of the scrollport).