carousel

Scroll-*-button

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.

This site is open source. Improve this page.