v140 · css

CSS scroll-target-group property

The scroll-target-group property specifies whether the element is a scroll marker group container. 'none': The element does not establish a scroll marker group container. 'auto': The element establishes a scroll marker group container forming a scroll marker group containing all of the scroll marker elements for which this is the nearest ancestor scroll

concepts

  1. Scroll Target Group

    scroll-target-group lets a set of elements act as a single scroll-snap unit OR as a group for :target highlighting. Bridges fragments with scroll-driven UX.

  2. Anchor Carousel

    The carousel motivation: real anchor elements become scroll markers, :target-current highlights the visible slide, tab focus works — without ::scroll-marker pseudo-element limits.

  3. TOC Active

    Sidebar table of contents with the active section auto-highlighted as you scroll the article. No IntersectionObserver, no scroll listener — the engine resolves :target-current.

  4. Segmented Control

    Horizontal scroll-snap panels with iOS-style segment switcher. Same property, different axis — the indicator follows the panel as you swipe.

  5. Group vs No Group

    Side-by-side: plain :target sticks to the last click; :target-current inside a group follows the scroll position. Two pseudo-classes, two sources of truth.

why it shipped

Currently to create carousel or table of contents patterns authors can use ::scroll-marker pseudo elements to create navigation elements. As they are pseudo elements they have a number of limitations. The scroll-target-group property allows to overcome such limitations by making HTML anchor elements 'scroll markers'. By specifying fragment identifier authors have 'scroll target into the view' functionality of ::scroll-markers, but don't have the 'tracking of current scroll marker' one. With scroll-target-group property, browser runs an algorithm to determine the 'current scroll marker' and aut

references