← Back to release summary

CSS scroll-target-group property

Category
CSS
Type
New or changed feature
Status
Proposed (Chrome Proposed)
Intent stage
None

Summary

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 marker group container. Establishing scroll marker group container allows for anchor HTML elements with fragment identifier that are inside such container to be HTML equivalent of ::scroll-marker pseudo elements. The anchor element whose scroll target (the element its fragment identifier is pointing to) is currently in view to be styled via :target-current pseudo class.

Motivation

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 authors can style such anchor element with :target-current pseudo class.

Standards & signals

View on chromestatus.com