Limited supportLimited browser support. Check compatibility before use.
Scrolling Limited support

::scroll-button

The ::scroll-button(<dir>) CSS pseudo-element is a focusable button which scrolls its originating scroll container element in the specified direction.

Scrolling

Overview

The ::scroll-button(<dir>) CSS pseudo-element is a focusable button which scrolls its originating scroll container element in the specified direction.

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

    The ::scroll-button(<dir>) CSS pseudo-element is a focusable button which scrolls its originating scroll container element in the specified direction.

Cautions

  • Limited browser support. Check compatibility before use.

Accessibility

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

Related links

Powered by web-features