Scroll markers
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.
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 | |
| CSS selector | ||||||
:scroll-marker Experimental `::scroll-marker` | 135 | 135 | | | 135 | |
: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
Use cases
-
Using Scroll markers
The scroll-marker-group CSS property controls whether a scroll container element has a ::scroll-marker-group pseudo-element generated.
Cautions
- Limited browser support. Check compatibility before use.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.