Proposal

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

.scroller {
  overflow: auto;
}
.scroller::scroll-down-button {
  content: "v";
}
.scroller::scroll-up-button {
  content: "^";
}

These should be focusable, behaving as a button. 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.

The order of the pseudo-elements with respect to the element should be:

• block direction previous,
• inline direction previous,
• the scrolling element,
• inline direction next,
• block direction next.

Open questions

Amount to scroll

What is the standard amount for a scroll? Options:

• One page
• Equivalent to pressing that direction on the keyboard

There are use cases where scrolling by a page at a time is nice. There are also use cases where scrolling one item (e.g. with scroll snap areas) is preferable.

Example

See the example using the polyfill.