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: > > > On Monday, June 16, 2025 at 1:14:29 PM UTC+2 Daniil Sakhapov wrote: > > Contact emailssakha...@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 > <https://issues.chromium.org/issues?q=customfield1222907:%22Blink%3ECSS%22> > > > > 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 > <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md> > ?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 > > > > This intent message was generated by Chrome Platform Status > <https://chromestatus.com/>. > > -- 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+unsubscr...@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.
