Свойство CSS `scroll-target-group`

Свойство scroll-target-group 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;

Свойству scroll-target-group задаётся одно из следующих ключевых значений:

Значения

none

Элемент не является контейнером группы маркеров прокрутки.

auto

Элемент является контейнером группы маркеров прокрутки.

Описание

Значение scroll-target-group: auto для элемента обозначает его как контейнер группы маркеров прокрутки. Он объединяет набор элементов навигации, которые позволяют пользователям перемещаться между элементами страницы (например, элементами карусели или разделами статьи) и выделяют элемент, находящийся в данный момент в области просмотра.

Все элементы <a> с идентификаторами фрагментов внутри контейнера автоматически становятся маркерами прокрутки. Элемент привязки, цель прокрутки которого в данный момент находится в области просмотра, можно стилизовать с помощью псевдокласса :target-current.

Различия между scroll-target-group и scroll-marker-group

Контейнеры групп маркеров прокрутки, созданные с помощью scroll-target-group, работают очень похоже на созданные с помощью свойства scroll-marker-group, но есть несколько отличий:

• При использовании scroll-target-group нужно самостоятельно создавать разметку контейнера группы маркеров прокрутки и маркеров прокрутки, тогда как scroll-marker-group автоматически создаёт набор псевдоэлементов, представляющих контейнер (::scroll-marker-group) и маркеры (один или несколько экземпляров ::scroll-marker). Для них автоматически устанавливаются ожидаемые связи навигации с контейнером прокрутки, в котором они создаются. Использование scroll-marker-group позволяет быстрее настроить компонент, поскольку не нужно создавать собственную разметку. Однако создание собственной разметки и назначение ей роли контейнера группы маркеров прокрутки с помощью scroll-target-group обеспечивает больший контроль и гибкость.
• Ссылки, обозначенные как маркеры прокрутки с помощью scroll-target-group, не имеют особого поведения навигации, тогда как маркеры, созданные с помощью scroll-marker-group, автоматически получают семантику tablist/tab. Это означает, что они ведут себя как один элемент в порядке перехода клавишей Tab, а пользователи могут перемещаться между маркерами прокрутки клавишами со стрелками. И снова, scroll-marker-group обеспечивает полезное поведение по умолчанию, но при использовании scroll-target-group можно задать для маркеров альтернативную семантику и поведение.

Формальное определение

Формальный синтаксис

scroll-target-group = 
  none |
  auto

Примеры

Основное использование scroll-target-group

В этом примере показана страница с оглавлением, содержащим ссылки на разные разделы.

HTML

Разметка содержит несколько элементов <section> с содержимым, а также оглавление, созданное с помощью нумерованного списка (<ol>/<li>) и элементов <a>.

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

<!-- ... -->

<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>
    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>
  <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 id="ch2" class="chapter">
  <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 id="ch3" class="chapter">
  <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 id="ch4" class="chapter">
  <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

Для краткости мы скрыли большую часть стилей. Наиболее важная для этого примера часть — мы задали scroll-target-group: auto для <ol>, чтобы превратить его в контейнер группы маркеров прокрутки и запустить алгоритм браузера, который определяет, какой элемент <a> является :target-current в данный момент (то есть цель какой ссылки сейчас находится в области просмотра). Затем мы стилизуем псевдокласс :target-current с помощью red color, чтобы он отчётливо выделялся.

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

Результат

Попробуйте перейти по ссылкам и прокрутить страницу. Вы увидите, что в каждом случае красная подсветка перемещается между ссылками в соответствии с отображаемым разделом.

Карусель CSS с маркерами прокрутки scroll-target-group

В этом примере показано, как создать маркеры прокрутки для карусели CSS с помощью scroll-target-group. Код этого примера похож на пример «Карусель с отдельными страницами»; ниже мы объясним только различия.

HTML

В разметке заданы идентификаторы для элементов списка, определяющих каждую страницу, и добавлен нумерованный список, который мы превратим в контейнер группы маркеров прокрутки с помощью 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

Мы создаём контейнер группы маркеров прокрутки и маркеры прокрутки, задавая scroll-target-group для элемента <ol>. Остальной код для их стилизации очень похож, за исключением того, что мы выбираем элементы по своему усмотрению (<ol> и <a>), а не псевдоэлементы ::scroll-marker-group и ::scroll-marker.

В завершение мы задаём стили для состояний :target-current, a:hover и a:focus, чтобы показать, какая страница отображается в данный момент, а также какие ссылки наведены или находятся в фокусе.

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

Результат

Попробуйте перемещаться тремя способами: активируя ссылки-маркеры прокрутки, прокручивая по горизонтали или нажимая кнопки прокрутки по бокам. Вы увидите, что в каждом случае подсветка перемещается между ссылками в соответствии с отображаемым разделом.

Спецификации

Совместимость с браузерами

См. также

• scroll-marker-group
• ::scroll-marker-group и псевдоэлементы ::scroll-marker
• псевдоклассы :target-current, :target-before и :target-after
• Создание каруселей CSS
• модуль переполнения CSS