scroll-target-group
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The scroll-target-group
CSS 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;
The scroll-target-group
property is specified as one of the following keyword values:
Values
Description
Setting scroll-target-group: auto
on an element denotes it as a scroll 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 between scroll-target-group
and scroll-marker-group
Scroll marker group containers created using scroll-target-group
behave in a very similar way to those created using the scroll-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-group
automatically 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 the scroll container they are generated on. Usingscroll-marker-group
provides 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-group
provides more control and flexibility. - Links denoted as scroll markers via
scroll-target-group
have no special navigation behavior, whereas markers generated viascroll-marker-group
automatically havetablist
/tab
semantics 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-group
provides 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
>Basic scroll-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 id="toc">
<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 id="intro" class="chapter">
<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 id="ch1" class="chapter">
<h2>Chapter 1</h2>
<!-- ... -->
</section>
<section id="ch2" class="chapter">
<h2>Chapter 2</h2>
<!-- ... -->
</section>
<!-- ... -->
CSS
We've hidden most of the styling for brevity. Most pertinent to this example, we've set scroll-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 a red
color
so that it stands out clearly.
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 with scroll-target-group
scroll markers
This example shows how to create CSS carousel scroll markers using scroll-target-group
. The code for this example is similar to our Carousel 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 id="page1">
<h2>Page 1</h2>
</li>
<li id="page2">
<h2>Page 2</h2>
</li>
<li id="page3">
<h2>Page 3</h2>
</li>
<li id="page4">
<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 setting scroll-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
, and a:focus
states to indicate which page is currently being shown and which links are being hovered/focused.
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-group
and::scroll-marker
pseudo-elements:target-current
pseudo-class- Creating CSS carousels
- CSS overflow module