Intent to Ship: CSS scroll-target-group property

Daniil Sakhapov

unread,

Jun 16, 2025, 7:14:29 AMJun 16

to blink-dev

Contact emails

Explainer

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 identifiers 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, the browser runs an algorithm to determine the 'current scroll marker' and authors can style such anchor elements with :target-current pseudo class.

Specification

https://drafts.csswg.org/css-overflow-5/#scroll-target-group

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 a scroll marker group container allows for anchor HTML elements with fragment identifiers that are inside such a 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.

Blink component

Blink>CSS

TAG review

General TAG review for scroll navigation control primitives

https://github.com/w3ctag/design-reviews/issues/1037

TAG review status

Not applicable

Risks

Interoperability and Compatibility

None

Gecko: No signal (https://github.com/mozilla/standards-positions/issues/1251)

Related issue https://github.com/WebKit/standards-positions/issues/447

Web developers: Multiple verbal approvals at CSS Day 2025.

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None

Debuggability

Covered by DevTools

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes

Flag name on about://flags

CSSScrollTargetGroup

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

https://chromium-review.googlesource.com/c/chromium/src/+/6607668

Estimated milestones

DevTrial on desktop	138
DevTrial on Android	138

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

None

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5189126177161216?gate=5135644355198976

This intent message was generated by Chrome Platform Status.

Yoav Weiss (@Shopify)

unread,

Jun 18, 2025, 11:26:27 AMJun 18

to blink-dev, Daniil Sakhapov

On Monday, June 16, 2025 at 1:14:29 PM UTC+2 Daniil Sakhapov wrote:

Contact emailssakh...@chromium.org

ExplainerCurrently 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 identifiers 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, the browser runs an algorithm to determine the 'current scroll marker' and authors can style such anchor elements with :target-current pseudo class.

Apologies, but can you expand a bit on the explainer and outline how you would expect web developers to use this and what experiences that would create?

Also, a code example would be very useful.

Specificationhttps://drafts.csswg.org/css-overflow-5/#scroll-target-group

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 a scroll marker group container allows for anchor HTML elements with fragment identifiers that are inside such a 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.

Blink componentBlink>CSS

TAG review
General TAG review for scroll navigation control primitives
https://github.com/w3ctag/design-reviews/issues/1037

TAG review statusNot applicable

Risks

Interoperability and Compatibility
None

Gecko: No signal (https://github.com/mozilla/standards-positions/issues/1251)
Related issue https://github.com/mozilla/standards-positions/issues/1161

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/514)
Related issue https://github.com/WebKit/standards-positions/issues/447

Web developers: Multiple verbal approvals at CSS Day 2025.

Other signals:

WebView application risks
Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?
None

Debuggability
Covered by DevTools

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?Yes

Is this feature fully tested by web-platform-tests?Yes
https://wpt.fyi/css/css-overflow/scroll-target-group-001.html https://wpt.fyi/css/css-overflow/scroll-target-group-002.html https://wpt.fyi/css/css-overflow/scroll-target-group-003.html https://wpt.fyi/css/css-overflow/scroll-target-group-004.html https://wpt.fyi/css/css-overflow/scroll-target-group-005.html https://wpt.fyi/css/css-overflow/scroll-target-group-006.html https://wpt.fyi/css/css-overflow/scroll-target-group-007.html https://wpt.fyi/css/css-overflow/scroll-target-group-008.html https://wpt.fyi/css/css-overflow/scroll-target-group-009.html https://wpt.fyi/css/css-overflow/scroll-target-group-010.html https://wpt.fyi/css/css-overflow/scroll-target-group-011.html

Flag name on about://flagsCSSScrollTargetGroup

Rollout planWill ship enabled for all users

Requires code in //chrome?False

Tracking bughttps://chromium-review.googlesource.com/c/chromium/src/+/6607668

Estimated milestonesDevTrial on desktop138DevTrial on Android138
Anticipated spec changes
Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).
None

Link to entry on the Chrome Platform Statushttps://chromestatus.com/feature/5189126177161216?gate=5135644355198976

Daniil Sakhapov

unread,

Jun 23, 2025, 8:14:33 AMJun 23

to blink-dev, Yoav Weiss, Daniil Sakhapov

Sure!

One example: imagine you're on a blog, and when you open an article, there's a table of contents. Authors often want that table of contents to highlight the section the user is currently reading.

Usually, the algorithm to figure this out involves custom JavaScript. However, by specifying the scroll-target-group property on a wrapper for the anchor elements that make up the ToC, authors can let the browser handle calculating the current section instead. This section can then be styled via the :target-current pseudo-class.

Example: https://codepen.io/Daniil-Sakhapov-the-sans/pen/GgJwwzL?editors=1100 (Note: requires Chrome Canary with chrome://flags/#enable-experimental-web-platform-features enabled).

The other use case is HTML scroll markers for carousels. If the functionality of ::scroll-marker isn't quite enough, authors can use HTML anchor elements and the scroll-target-group property to leverage the richer functionality of standard HTML elements.

среда, 18 июня 2025 г. в 17:26:27 UTC+2, Yoav Weiss:

Yoav Weiss (@Shopify)

unread,

Jun 25, 2025, 11:10:52 AMJun 25

to blink-dev, Daniil Sakhapov, Yoav Weiss

LGTM1

Jeffrey Yasskin

unread,

Jun 25, 2025, 11:14:12 AMJun 25

to Daniil Sakhapov, blink-dev, Yoav Weiss

Would it be possible to put this explanation and example in the specification, instead of in an email thread where it'll get lost?

Thanks,

Jeffrey

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/d9b8de44-9ac3-43bd-8a0e-1f9c552b0074n%40chromium.org.

Alex Russell

unread,

Jun 25, 2025, 11:26:22 AMJun 25

to blink-dev, Jeffrey Yasskin, blink-dev, Yoav Weiss, Daniil Sakhapov

LGTM2, contingent on a good resolution of Jeffery's concern.

Best,

Alex

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

Daniil Sakhapov

unread,

Jun 26, 2025, 6:34:59 AMJun 26

to Alex Russell, blink-dev, Jeffrey Yasskin, Yoav Weiss

Jeffery, I think your suggestion is great! Do you think it would be better to put the explanation on the MDN page for scroll-target-group property?

ср, 25 июн. 2025 г. в 15:26, Alex Russell <sligh...@chromium.org>:

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

Jeffrey Yasskin

unread,

Jun 26, 2025, 1:03:48 PMJun 26

to Daniil Sakhapov, Lola Odelola, Florian Scholz, Alex Russell, blink-dev, Jeffrey Yasskin, Yoav Weiss

+Lola Odelola and +Florian Scholz as the chairs of the Docs CG, who'll have a better sense of the right answer here.

My guess is that it'll work better in the long run to start with putting your explanation into the specification, so that people reading that have the context they need to evolve the specification. This will also give those future editors a structure in the specification to start their documentation before there's a possibility of an MDN page. Then the MDN authors are likely to copy that to start their page, but since they're tech writers, they'll probably also be able to improve it for a general development audience.

Jeffrey

Chris Harrelson

unread,

Jul 2, 2025, 11:07:43 AM (14 days ago) Jul 2

to Jeffrey Yasskin, Daniil Sakhapov, Lola Odelola, Florian Scholz, Alex Russell, blink-dev, Yoav Weiss

LGTM3

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CANh-dX%3DaSaTBfGRQQfhk_i8ARfua%3DTZ5KYhs5jG1mKaURX0o4A%40mail.gmail.com.

Daniil Sakhapov

unread,

Jul 4, 2025, 10:27:38 AM (12 days ago) Jul 4

to blink-dev, Chris Harrelson, Daniil Sakhapov, Lola Odelola, Florian Scholz, Alex Russell, blink-dev, Yoav Weiss, Jeffrey Yasskin

The requested example has just been merged to the spec - https://drafts.csswg.org/css-overflow-5/#example-87a0a07a.

среда, 2 июля 2025 г. в 17:07:43 UTC+2, Chris Harrelson:

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/d9b8de44-9ac3-43bd-8a0e-1f9c552b0074n%40chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

Jeffrey Yasskin

unread,

Jul 4, 2025, 10:38:18 AM (12 days ago) Jul 4

to Daniil Sakhapov, blink-dev, Chris Harrelson, Lola Odelola, Florian Scholz, Alex Russell, Yoav Weiss, Jeffrey Yasskin

Thanks!

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/d9b8de44-9ac3-43bd-8a0e-1f9c552b0074n%40chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

Reply all

Reply to author

Forward