scroll-target-group
Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.
Thescroll-target-groupCSS property specifies whether an element is a scroll marker group container.
Syntax
/* Keyword values */scroll-target-group: none;scroll-target-group: auto;/* Global values */scroll-target-group: inherit;scroll-target-group: initial;scroll-target-group: revert;scroll-target-group: revert-layer;scroll-target-group: unset;Thescroll-target-group property is specified as one of the following keyword values:
Values
Description
Settingscroll-target-group: auto on an element denotes it as ascroll marker group container. This groups together a set of navigation items that allow users to navigate between elements on a page (such as carousel items or article sections) and highlight which element is currently in view.
Any<a> elements with fragment identifiers inside the container are automatically set as scroll markers. The anchor element whose scroll target is currently in view can be styled via the:target-current pseudo-class.
Differences betweenscroll-target-group andscroll-marker-group
Scroll marker group containers created usingscroll-target-group behave in a very similar way to those created using thescroll-marker-group property, with some differences:
- With
scroll-target-group, you have to create your own markup to represent the scroll marker group container and scroll markers, whereasscroll-marker-groupautomatically creates a set of pseudo-elements to represent the container (::scroll-marker-group) and the markers (one or more instances of::scroll-marker). These automatically have the expected navigation associations with thescroll container they are generated on. Usingscroll-marker-groupprovides a quicker setup because you don't need to use your own markup. However, creating your own markup and setting it as a scroll marker group container viascroll-target-groupprovides more control and flexibility. - Links denoted as scroll markers via
scroll-target-grouphave no special navigation behavior, whereas markers generated viascroll-marker-groupautomatically havetablist/tabsemantics applied to them, meaning they behave like a single item in the tab order, and users can move between scroll markers with the arrow keys. Again,scroll-marker-groupprovides useful default behavior, but you have the flexibility of providing alternative semantics and behavior for markers specified usingscroll-target-group.
Formal definition
Value not found in DB!Formal syntax
scroll-target-group =
none|
auto
Examples
Basicscroll-target-group usage
This example shows a page with a table of contents linking to different sections.
HTML
Our markup has a series of<section> elements containing content, and a table of contents created using an ordered list (<ol>/<li>) and<a> elements.
<nav> <ol> <li><a href="#intro">Introduction</a></li> <li><a href="#ch1">Chapter 1</a></li> <li><a href="#ch2">Chapter 2</a></li> <li><a href="#ch3">Chapter 3</a></li> <li><a href="#ch4">Chapter 4</a></li> </ol></nav><section> <h1>Prose of the century</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p></section><section> <h2>Chapter 1</h2> <!-- ... --></section><section> <h2>Chapter 2</h2> <!-- ... --></section><!-- ... --><nav> <ol> <li><a href="#intro">Introduction</a></li> <li><a href="#ch1">Chapter 1</a></li> <li><a href="#ch2">Chapter 2</a></li> <li><a href="#ch3">Chapter 3</a></li> <li><a href="#ch4">Chapter 4</a></li> </ol></nav><section> <h1>My story</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p></section><section> <h2>Chapter 1</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p> <p> Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. </p> <p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p></section><section> <h2>Chapter 2</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p> <p> Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. </p></section><section> <h2>Chapter 3</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p> <p> Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. </p></section><section> <h2>Chapter 4</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p> <p> Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. </p></section>CSS
We've hidden most of the styling for brevity. Most pertinent to this example, we've setscroll-target-group: auto on the<ol> to turn it into a scroll marker group container and trigger the browser's algorithm for calculating which<a> element is the:target-current at any given time (that is, which link's target is currently in view). We then style the:target-current pseudo-class with aredcolor so that it stands out clearly.
body { font: 1.2em / 1.5 system-ui; width: 50%; max-width: 700px; margin: 0 auto;}nav { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: center;}section { padding-top: 60px;}a { color: black; text-decoration: none;}a:hover,a:focus { text-decoration: underline;}ol { display: flex; width: 100%; justify-content: space-around; list-style-type: none; padding: 20px 0; margin: 0; background: white;}ol { scroll-target-group: auto;}:target-current { color: red;}Result
Try navigating by activating the links and by scrolling. You'll see that in each case, the red highlight moves between the links to match the section currently being shown.
CSS carousel withscroll-target-group scroll markers
This example shows how to createCSS carousel scroll markers usingscroll-target-group. The code for this example is similar to ourCarousel with single pages example; we'll just explain the differences below.
HTML
The markup has IDs set on the list items that define each page, and an ordered list added that we'll turn into a scroll marker group container using CSS.
<h1>CSS carousel single item per page</h1><ul> <li> <h2>Page 1</h2> </li> <li> <h2>Page 2</h2> </li> <li> <h2>Page 3</h2> </li> <li> <h2>Page 4</h2> </li></ul><ol> <li><a href="#page1">1</a></li> <li><a href="#page2">2</a></li> <li><a href="#page3">3</a></li> <li><a href="#page4">4</a></li></ol>CSS
We create the scroll marker group container and scroll markers by settingscroll-target-group on the<ol> element. The rest of the code for styling these is very similar, except that we are targeting elements of our own choosing (<ol> and<a>) rather than the::scroll-marker-group and::scroll-marker pseudo-elements.
We complete the code by setting some styles on the:target-current,a:hover, anda:focus states to indicate which page is currently being shown and which links are being hovered/focused.
/* General styles */* { box-sizing: border-box;}body { margin: 0; font-family: "Helvetica", "Arial", sans-serif;}h1 { text-align: center;}button { background-color: white;}/* General styling of list as scrolling carousel */ul { width: 100%; height: 400px; padding: 20px; gap: 4%; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: scroll; scroll-snap-type: x mandatory;}ul li { list-style-type: none; background-color: #eeeeee; border: 1px solid #dddddd; padding: 20px; scroll-snap-align: center;}/* CSS scroll buttons *//* Style the scroll buttons */ul::scroll-button(*) { border: 0; font-size: 2rem; background: none; color: rgb(0 0 0 / 0.7); cursor: pointer;}ul::scroll-button(*):hover,ul::scroll-button(*):focus { color: black;}ul::scroll-button(*):active { translate: 1px 1px;}ul::scroll-button(*):disabled { color: rgb(0 0 0 / 0.2);}ul::scroll-button(left) { content: "◄";}ul::scroll-button(right) { content: "►";}/* Position the scroll buttons */ul { anchor-name: --my-carousel;}ul::scroll-button(*) { position: absolute; position-anchor: --my-carousel;}ul::scroll-button(left) { right: calc(anchor(left) - 70px); top: calc(anchor(bottom) - 80px);}ul::scroll-button(right) { left: calc(anchor(right) - 70px); top: calc(anchor(bottom) - 80px);}ol { position: absolute; position-anchor: --my-carousel; top: calc(anchor(bottom) - 90px); justify-self: anchor-center; display: flex; justify-content: center; gap: 20px; list-style-type: none; padding: 0; scroll-target-group: auto;}ol a { width: 28px; height: 28px; display: inline-block; text-align: center; text-decoration: none; padding-top: 4px; color: black; background-color: transparent; border: 2px solid black; border-radius: 50%;}ol a:hover,ol a:focus,:target-current { background-color: black; color: white;}Result
Try navigating in each of these three ways: by activating the scroll marker links, by horizontal scrolling, or by pressing the scroll buttons on either side. You'll see that in each case, the highlight moves between the links to match the section currently being shown.
Specifications
| Specification |
|---|
| CSS Overflow Module Level 5 # scroll-target-group |
Browser compatibility
Loading…
See also
scroll-marker-group::scroll-marker-groupand::scroll-markerpseudo-elements:target-currentpseudo-class- Creating CSS carousels
- CSS overflow module