Limited support Limited browser support. Check compatibility before use.

Scroll markers

Experimental: This is an experimental technology

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

The scroll-marker-group CSS property controls whether a scroll container element has a ::scroll-marker-group pseudo-element generated. If present, the property also specifies whether the scroll marker group should be placed before or after the contents of the scroll group container in the default visual and tab order.

Note: To create a scroll marker group container from an existing element that contains a set of <a> elements, use the scroll-target-group property. Read about the differences in behavior between the two.

Scrolling

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

    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