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

Scroll markers

A scroll marker scrolls a container to a scroll target. The ::scroll-marker CSS pseudo-element selects a scroll marker in a ::scroll-marker-group pseudo-element, generated before or after the scroll container. You can use them to navigate and style tables of contents, tab panels, and carousels.

Scrolling

Overview

A scroll marker scrolls a container to a scroll target. The ::scroll-marker CSS pseudo-element selects a scroll marker in a ::scroll-marker-group pseudo-element, generated before or after the scroll container. You can use them to navigate and style tables of contents, tab panels, and carousels.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
scroll-marker-group
Experimental
135
135
135
after
Experimental
135
135
135
before
Experimental
135
135
135
none
Experimental
135
135
135
Other
css.selectors.scroll-marker
Experimental

`::scroll-marker`
135
135
135
css.selectors.scroll-marker-group
Experimental

`::scroll-marker-group`
135
135
135
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.carousel {
  overflow-x: auto;
}
.carousel::scroll-marker-group {
  display: flex;
  gap: 8px;
}
.slide::scroll-marker {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

Live demo

dtm-ka-

CSS dtm-ka- demo.

PreviewFullscreen

numberm-ka-

CSS numberm-ka- demo.

PreviewFullscreen

ba- typem-ka-

CSS ba- typem-ka- demo.

PreviewFullscreen

Use cases

  • Using Scroll markers

    A scroll marker scrolls a container to a scroll target. The ::scroll-marker CSS pseudo-element selects a scroll marker in a ::scroll-marker-group pseudo-element, generated before or after the scroll container. You can use them to navigate and style tables of contents, tab panels, and carousels.

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