::scroll-button()

The ::scroll-button() CSS pseudo-element represents a button for controlling the scrolling of a scroll container.

Syntax

css

::scroll-button(<scroll-button-direction>) {
  /* ... */
}

Parameters

<scroll-button-direction>

A value representing which direction of scroll button you want to select. The following values are available:

*: Selects all four scroll buttons, allowing styles to be applied to each of them in a single rule.
down: Selects the downwards scroll button.
left: Selects the leftwards scroll button.
right: Selects the rightwards scroll button.
up: Selects the upwards scroll button.
block-end: Selects the button that will scroll the content in the block-end direction.
block-start: Selects the button that will scroll the content in the block-start direction.
inline-end: Selects the button that will scroll the content in the inline-end direction.
inline-start: Selects the button that will scroll the content in the inline-start direction.

The specification also defines two other values — next and prev — but these are not currently supported in any browser.

The ::scroll-button() pseudo-elements are generated inside a scroll container, only when their content properties are set to a value other than none. They are generated as siblings of the scroll container's child DOM elements, immediately preceding them, but after a generated ::scroll-marker-group pseudo-element.

Which button is selected is determined by the selector's argument, which specifies which scrolling direction you want to select the button for. You can generate up to four scroll buttons per scroll container, which will scroll the content towards the start and end of the block and inline axes. You can also specify a value of * to target all of the ::scroll-button() pseudo-elements with styles in a single rule.

The generated buttons behave just like regular <button> elements, including sharing their default browser styles. They are focusable, etc. When a scroll button is pressed, the scroll container's content is scrolled in the specified direction by an amount determined by the browser. The recommendation is to set up CSS scroll snapping on the scroll container and set each separate item of content you want to scroll to as a snap target. This being the case, the buttons will scroll the content to a new snap target each time they are pressed. While the scroll buttons will work without scroll snapping, you might not get the desired effect.

When it is not possible to scroll any further in a particular scroll button's scrolling direction, it is automatically disabled, otherwise it is enabled. You can style the scroll buttons in their enabled and disabled states using the :enabled and :disabled pseudo-classes.

Examples

Note: You can find a full example walkthough featuring the below code snippets in our Creating CSS carousels guide.

Styling and generating scroll buttons

The following snippet targets all of the scroll buttons generated inside a scrolling <ul> element to apply general styles:

css

ul::scroll-button(*) {
  border: 0;
  font-size: 2rem;
  background: none;
  color: rgb(0 0 0 / 0.7);
  cursor: pointer;
}

ul::scroll-button(*):hover,
ul::scroll-button(*):focus {
  color: rgb(0 0 0 / 1);
}

ul::scroll-button(*):active {
  translate: 1px 1px;
}

ul::scroll-button(*):disabled {
  color: rgb(0 0 0 / 0.2);
}

Below, an appropriate icon is set on the left and right scroll buttons via the content property, which is also what causes the scroll buttons to be generated:

css

ul::scroll-button(left) {
  content: "◄";
}

ul::scroll-button(right) {
  content: "►";
}

Positioning scroll buttons

The scroll buttons can be positioned relative to their parent scroll container using CSS anchor positioning. First of all, a reference anchor-name is set on the list. Next, each scroll button has its position set to absolute, and its position-anchor property set to the same reference name defined on the list, to associate the two together.

css

ul {
  anchor-name: --myCarousel;
}

ul::scroll-button(*) {
  position: absolute;
  position-anchor: --myCarousel;
}

To actually position each scroll button, you can set values on their inset properties that use anchor() functions to position the specified sides of the buttons relative to the sides of the container.

css

ul::scroll-button(left) {
  right: calc(anchor(left) - 70px);
  bottom: calc(anchor(top) + 21px);
}

ul::scroll-button(right) {
  left: calc(anchor(right) - 70px);
  bottom: calc(anchor(top) + 21px);
}

Note: In each case, the calc() function is used to add some space between the button edge and the scroll container edge. So for example, the right-hand edge of the left scroll button is positioned 70 pixels to the right of the container's left-hand edge.

Specifications

Specification
CSS Overflow Module Level 5 # scroll-buttons