v138 · 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

    Group elements as a single scroll-snap unit or :target highlight set.

  2. Dynamic table of contents

    The motivating ToC pattern from the spec write-up. Any <a href="#x"> becomes a scroll marker for its target section — the browser tracks “current” for you instead of an IntersectionObserver hand-roll.

  3. Anchor pagination

    Horizontal scroll-snap gallery with real <a href="#x"> pagination. scroll-target-group: auto on the nav promotes each anchor to a scroll marker; the browser keeps :target-current in sync with the current snap. Zero JS listeners.

  4. Step wizard

    A multi-step checkout wizard where scroll-target-group: auto on the step nav keeps :target-current in sync as you scroll between steps — no IntersectionObserver, no manual class toggling. A JS fallback keeps the indicator working on browsers that don’t support the feature yet.

  5. Reading Nav

    An article sidebar where scroll-target-group: auto on the <nav> makes the browser track which section is currently scrolled into view. The active link gets :target-current — bold, accent border, highlighted background — without a single IntersectionObserver. A JS fallback is wired for non-supporting browsers.

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