scroll-target-group

The scroll-target-group CSS property specifies whether a container element is a scroll marker group container.

Syntax

css

/* Keyword values */
scroll-target-group: auto;
scroll-target-group: none;

/* 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 keyword values listed below.

Values

auto: The element is a scroll marker group container.
none: The element is not a scroll marker group container.

Setting scroll-target-group: auto on a container element denotes it as a scroll marker group container, which groups together a set of navigation items that allow you to navigate between elements on a page (such as carousel items or article sections) and are highlighted to indicate 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.

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:

scroll-marker-group automatically creates a set of pseudo-elements to represent the group container (::scroll-marker-group) and markers (one or more instances of ::scroll-marker), and they automatically have the expected navigation associations made with the scroll container the group container is generated on. This is quicker to set up, and you don't need to create markup for the container and markers, but creating your own markup and setting it as a scroll marker group container via scroll-target-group provides more control and flexibility.
A group container generated with scroll-marker-group automatically has tablist/tab semantics applied to it, meaning that it behaves like a single item in the tab index, and you can move between scroll markers using cursor keys. The markers specified using scroll-target-group behave like individual links by default, but you have the flexibility of providing alternative semantics and behavior if wished.

Formal definition

Value not found in DB!

Formal syntax

scroll-target-group = 
  none  |
  auto

Examples

Basic `scroll-target-group` usage

This example provides a basic page of content with a table of contents to link 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>
    I'm baby xOXO bespoke cupidatat PBR&B, affogato cronut 3 wolf moon ea
    narwhal asymmetrical. Af health goth shaman in slow-carb godard echo park.
    Tofu farm-to-table labore salvia tote bag food truck dolore gluten-free
    poutine kombucha fanny pack +1 franzen lyft fugiat. Chicharrones next level
    jianbing, enamel pin seitan cardigan bruh snackwave beard incididunt dolor
    lumbersexual before they sold out dreamcatcher single-origin coffee.
  </p>
</section>
<section id="ch1" class="chapter">
  <h2>Chapter 1</h2>

  <!-- ... -->
</section>
<section id="ch2" class="chapter">
  <h2>Chapter 2</h2>

  <!-- ... -->
</section>

<!-- ... -->

<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>My story</h1>
  <p>
    I'm baby xOXO bespoke cupidatat PBR&B, affogato cronut 3 wolf moon ea
    narwhal asymmetrical. Af health goth shaman in slow-carb godard echo park.
    Tofu farm-to-table labore salvia tote bag food truck dolore gluten-free
    poutine kombucha fanny pack +1 franzen lyft fugiat. Chicharrones next level
    jianbing, enamel pin seitan cardigan bruh snackwave beard incididunt dolor
    lumbersexual before they sold out dreamcatcher single-origin coffee.
  </p>
</section>
<section id="ch1" class="chapter">
  <h2>Chapter 1</h2>
  <p>
    I'm baby xOXO bespoke cupidatat PBR&B, affogato cronut 3 wolf moon ea
    narwhal asymmetrical. Af health goth shaman in slow-carb godard echo park.
    Tofu farm-to-table labore salvia tote bag food truck dolore gluten-free
    poutine kombucha fanny pack +1 franzen lyft fugiat. Chicharrones next level
    jianbing, enamel pin seitan cardigan bruh snackwave beard incididunt dolor
    lumbersexual before they sold out dreamcatcher single-origin coffee.
  </p>
  <p>
    Kombucha laborum tempor iceland pour-over. Keytar in echo park gorpcore
    bespoke. Art party quinoa stumptown celiac, sed chillwave 3 wolf moon.
    Scenester fugiat pariatur, seitan selvage excepteur chambray yuccie artisan.
    Sunt schlitz ugh, et jawn sus four loko pop-up post-ironic photo booth
    occaecat deep v 8-bit tacos marfa. Tattooed ipsum tbh occaecat umami four
    loko adaptogen taiyaki truffaut hexagon neutral milk hotel.
  </p>
  <p>
    Austin mukbang scenester pabst, kale chips helvetica in selvage tote bag
    drinking vinegar craft beer pickled meh subway tile +1. Big mood kogi blog,
    vape hella seitan veniam.
  </p>
</section>
<section id="ch2" class="chapter">
  <h2>Chapter 2</h2>
  <p>
    Kombucha laborum tempor iceland pour-over. Keytar in echo park gorpcore
    bespoke. Art party quinoa stumptown celiac, sed chillwave 3 wolf moon.
    Scenester fugiat pariatur, seitan selvage excepteur chambray yuccie artisan.
    Sunt schlitz ugh, et jawn sus four loko pop-up post-ironic photo booth
    occaecat deep v 8-bit tacos marfa. Tattooed ipsum tbh occaecat umami four
    loko adaptogen taiyaki truffaut hexagon neutral milk hotel.
  </p>
  <p>
    Chillwave gastropub chartreuse deserunt butcher umami meditation ennui. Sus
    post-ironic affogato irony non succulents la croix labore tousled. Tumblr
    selvage sartorial taxidermy yes plz fashion axe deserunt. Big mood
    humblebrag hammock meditation, four dollar toast vice bruh minim tacos
    chartreuse drinking vinegar sunt yes plz YOLO cred. Synth chartreuse est,
    wayfarers pop-up ut gorpcore consequat ullamco meh lyft crucifix selvage
    occaecat.
  </p>
</section>
<section id="ch3" class="chapter">
  <h2>Chapter 3</h2>
  <p>
    Chillwave gastropub chartreuse deserunt butcher umami meditation ennui. Sus
    post-ironic affogato irony non succulents la croix labore tousled. Tumblr
    selvage sartorial taxidermy yes plz fashion axe deserunt. Big mood
    humblebrag hammock meditation, four dollar toast vice bruh minim tacos
    chartreuse drinking vinegar sunt yes plz YOLO cred. Synth chartreuse est,
    wayfarers pop-up ut gorpcore consequat ullamco meh lyft crucifix selvage
    occaecat.
  </p>
  <p>
    I'm baby xOXO bespoke cupidatat PBR&B, affogato cronut 3 wolf moon ea
    narwhal asymmetrical. Af health goth shaman in slow-carb godard echo park.
    Tofu farm-to-table labore salvia tote bag food truck dolore gluten-free
    poutine kombucha fanny pack +1 franzen lyft fugiat. Chicharrones next level
    jianbing, enamel pin seitan cardigan bruh snackwave beard incididunt dolor
    lumbersexual before they sold out dreamcatcher single-origin coffee.
  </p>
</section>
<section id="ch4" class="chapter">
  <h2>Chapter 4</h2>
  <p>
    Austin mukbang scenester pabst, kale chips helvetica in selvage tote bag
    drinking vinegar craft beer pickled meh subway tile +1. Big mood kogi blog,
    vape hella seitan veniam.
  </p>
  <p>
    I'm baby xOXO bespoke cupidatat PBR&B, affogato cronut 3 wolf moon ea
    narwhal asymmetrical. Af health goth shaman in slow-carb godard echo park.
    Tofu farm-to-table labore salvia tote bag food truck dolore gluten-free
    poutine kombucha fanny pack +1 franzen lyft fugiat. Chicharrones next level
    jianbing, enamel pin seitan cardigan bruh snackwave beard incididunt dolor
    lumbersexual before they sold out dreamcatcher single-origin coffee.
  </p>
</section>

CSS

We've hidden most of the styling for brevity. Most pertinently 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 moment in time (that is, which link's target is currently in view). We then style the :target-current pseudo-class with a color of red so that it is clearly visible.

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;
}

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.

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.

html

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

/* General styles */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, 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: #eee;
  border: 1px solid #ddd;
  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: rgb(0 0 0 / 1);
}

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: --myCarousel;
}

ul::scroll-button(*) {
  position: absolute;
  position-anchor: --myCarousel;
}

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);
}

css

ol {
  position: absolute;
  position-anchor: --myCarousel;
  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 by activating the scroll marker links, scrolling, and pressing the scroll buttons. 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

scroll-target-group

Syntax

Values

Description

Formal definition

Formal syntax

Examples

Basic `scroll-target-group` usage

HTML

CSS

Result

CSS carousel with `scroll-target-group` scroll markers

HTML

CSS

Result

Specifications

Browser compatibility

See also