Limited support Limited browser support. Check compatibility before use.

::scroll-button

Experimental: This is an experimental technology

Check the Browser compatibility table carefully before using this in production.

The ::scroll-button() CSS pseudo-element represents a button for controlling the scrolling of a scroll container. They are generated on scroll containers when their content value is not none. The direction of the scrolling is determined by the parameter value.

Scrolling

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:scroll-button
Experimental
135
135
135
block-end
Experimental
135
135
135
block-start
Experimental
135
135
135
down
Experimental
135
135
135
inline-end
Experimental
135
135
135
inline-start
Experimental
135
135
135
left
Experimental
135
135
135
next
Experimental
prev
Experimental
right
Experimental
135
135
135
star
Experimental

*
135
135
135
up
Experimental
135
135
135
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

HTML 
.carousel::scroll-button(left) {
  content: '<';
}
.carousel::scroll-button(right) {
  content: '>';
}

Live demo

horizontalkal-sel

CSS horizontalkal-sel demo.

PreviewFullscreen

verticalscroll

CSS verticalscroll demo.

PreviewFullscreen

Custom button

CSS custombutton demo.

PreviewFullscreen

Use cases

  • Using ::scroll-button

    Experimental: This is an experimental technology

Cautions

  • Limited browser support. Check compatibility before use.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links