scroll-marker-group

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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 has a ::scroll-marker-group pseudo-element generated, and if so, whether it is generated before or after the container's child DOM elements.

Syntax

css

/* Single values */
scroll-marker-group: before;
scroll-marker-group: after;
scroll-marker-group: none;

/* Global values */
scroll-marker-group: inherit;
scroll-marker-group: initial;
scroll-marker-group: revert;
scroll-marker-group: revert-layer;
scroll-marker-group: unset;

Values

after: The ::scroll-marker-group pseudo-element is generated as a sibling of the scroll container's child DOM elements, immediately preceding them, and any generated ::scroll-button() pseudo-elements. It does however appear at the end of the container's tab order and layout box order (but not DOM structure).
before: The ::scroll-marker-group pseudo-element is generated as a sibling of the scroll container's child DOM elements, immediately preceding them, and any generated ::scroll-button() pseudo-elements. It also appears at the start of the container's tab order and layout box order.
none: The scroll container does not have a generated ::scroll-marker-group pseudo-element. This is the default value if the scroll-marker-group property is not explicitly set.

Note: It is a best practice to match the visual rendering position of the scroll marker group with the tab order. When placing the group at the start of the content, put it at the beginning of the tab order using before. When placing the group at the end of the content, put it at the end of the tab order using after.

Formal definition

Value not found in DB!

Formal syntax

scroll-marker-group = 
  none    |
  before  |
  after

Examples

See Creating CSS carousels for full examples that use the scroll-marker-group property.

Specifications

Specification
CSS Overflow Module Level 5 # scroll-marker-group-property