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

css
/* 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

none

The element is not a scroll marker group container.

auto

The element is a scroll marker group container.

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, whereas scroll-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. Using scroll-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 via scroll-target-group provides more control and flexibility.
  • Links denoted as scroll markers via scroll-target-group have no special navigation behavior, whereas markers generated via scroll-marker-group automatically have tablist/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 using scroll-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.

html
<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.

css
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.

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.

html

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.

css

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

See also