CSS-псевдоэлемент `::scroll-marker-group`

::scroll-marker-group — это CSS псевдоэлемент, создаваемый внутри контейнера прокрутки. Он содержит все псевдоэлементы ::scroll-marker, создаваемые на потомках контейнера прокрутки.

Синтаксис

::scroll-marker-group {
  /* ... */
}

Описание

Псевдоэлемент ::scroll-marker-group контейнера прокрутки представляет собой контейнер группы маркеров прокрутки. Этот контейнер автоматически содержит все псевдоэлементы ::scroll-marker, создаваемые для него самого или его потомков. Благодаря этому их можно позиционировать и стилизовать как группу. Этот псевдоэлемент обычно используется при создании CSS-карусели для отображения индикатора позиции прокрутки. Отдельные маркеры прокрутки можно использовать для перехода к связанным с ними элементам содержимого.

Чтобы создать псевдоэлемент ::scroll-marker-group, свойству scroll-marker-group контейнера прокрутки необходимо задать значение, отличное от none. Значение scroll-marker-group определяет, где контейнер группы маркеров прокрутки располагается в порядке перехода по элементам карусели клавишей Tab и в порядке блоков макета (но не в структуре DOM): значение before помещает его в начало, а after — в конец.

В соответствии с рекомендациями по обеспечению доступности визуальное положение контейнера группы маркеров прокрутки должно соответствовать порядку перехода по элементам клавишей Tab. Если группа расположена в начале содержимого, поместите её в начало порядка перехода с помощью before. Если группа расположена в конце содержимого, поместите её в конец порядка перехода с помощью after.

Когда контейнер группы маркеров прокрутки создаётся в контейнере прокрутки с помощью свойства scroll-marker-group, контейнер прокрутки отображается с семантикой tablist/tab. К нему можно перейти с помощью клавиши Tab, а затем перемещаться между разными «страницами» клавишами со стрелками влево и вправо (или вверх и вниз). При этом состояние соответствующих маркеров прокрутки и кнопок прокрутки меняется ожидаемым образом. Между маркерами прокрутки также можно перемещаться обычным способом с помощью клавиши Tab.

Примеры

Другие примеры использования псевдоэлемента ::scroll-marker см. в статье Создание CSS-каруселей.

Создание маркеров прокрутки карусели

В этой демонстрации показана карусель из отдельных страниц, каждый элемент которой занимает всю страницу. Мы добавили маркеры прокрутки, чтобы пользователь мог перейти на любую страницу, щёлкнув соответствующий маркер.

HTML

HTML состоит из маркированного списка, каждый элемент списка которого содержит пример содержимого:

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

CSS

Сначала мы превращаем <ul> в карусель, задавая свойству display значение flex, чтобы создать одну незаворачиваемую строку элементов <li>. Свойству overflow-x задаётся значение auto: если элементы выходят за границы контейнера по оси x, содержимое прокручивается по горизонтали. Затем мы превращаем <ul> в контейнер с привязкой прокрутки, чтобы элементы всегда фиксировались на месте при прокрутке контейнера. Для этого свойству scroll-snap-type задаётся значение mandatory.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Helvetica", "Arial", sans-serif;
}

ul {
  display: flex;
  gap: 4vw;
  padding-left: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

Затем мы стилизуем элементы <li>, используя свойство flex, чтобы задать им 100% ширины контейнера. Значение start свойства scroll-snap-align заставляет левый край самого левого видимого элемента фиксироваться у левого края контейнера при прокрутке содержимого.

li {
  list-style-type: none;
  background-color: #eeeeee;
  flex: 0 0 100%;
  height: 200px;
  padding-top: 20px;
  scroll-snap-align: start;
  text-align: center;
}

Затем свойству scroll-marker-group списка задаётся значение after, чтобы псевдоэлемент ::scroll-marker-group располагался после содержимого списка в DOM-порядке перехода по элементам и в порядке блоков макета. Это означает, что он находится после кнопок прокрутки:

ul {
  scroll-marker-group: after;
}

Затем для псевдоэлемента ::scroll-marker-group задаётся компоновка flexbox со значением center свойства justify-content и значением 20px свойства gap. Так его дочерние элементы (псевдоэлементы ::scroll-marker) располагаются по центру ::scroll-marker-group с промежутками между ними.

ul::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 20px;
}

Затем стилизуются сами маркеры прокрутки. Их внешний вид задаётся свойствами width, height, background-color, border и border-radius. Кроме того, свойству content необходимо задать значение, отличное от none, чтобы эти маркеры действительно создавались.

li::scroll-marker {
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: 2px solid black;
  border-radius: 50%;
  content: "";
}

Наконец, псевдокласс :target-current используется для выбора маркера прокрутки, соответствующего текущей видимой «странице», и показывает, насколько далеко пользователь прокрутил содержимое. В данном случае мы задаём background-color значение black, чтобы маркер отображался в виде закрашенного круга.

li::scroll-marker:target-current {
  background-color: black;
}

Результат

Позиционирование контейнера группы маркеров прокрутки с помощью якорного позиционирования

Этот пример дополняет предыдущий и демонстрирует использование якорного позиционирования CSS для размещения контейнера группы маркеров прокрутки относительно карусели.

CSS

Псевдоэлемент ::scroll-marker-group списка позиционируется относительно карусели с помощью якорного позиционирования CSS: группе задаётся значение свойства position-anchor, совпадающее со значением свойства anchor-name элемента <ul>. Затем мы позиционируем группу относительно контейнера прокрутки в блочном направлении, задавая свойству top значение, включающее функцию anchor(). Мы также задаём свойству justify-self значение anchor-center, которое выравнивает группу по центру контейнера прокрутки во встроенном направлении.

ul {
  anchor-name: --my-carousel;
}

ul::scroll-marker-group {
  /* From the previous example */
  display: flex;
  gap: 20px;

  position: absolute;
  position-anchor: --my-carousel;
  top: calc(anchor(bottom) - 70px);
  justify-self: anchor-center;
}

Результат

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

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

См. также

• scroll-marker-group
• scroll-target-group
• ::scroll-button()
• ::scroll-marker
• ::column
• :target-current
• :target-before
• :target-after
• Создание CSS-каруселей
• Модуль якорного позиционирования CSS
• Модуль переполнения CSS
• Галерея CSS-каруселей на chrome.dev (2025)