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

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

Синтаксис

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

Описание

На элементе создаётся ::scroll-marker, если свойству content его ::scroll-marker задано значение, отличное от none, и у него есть предок — контейнер прокрутки со значением свойства scroll-marker-group, отличным от none (это означает, что будет создан псевдоэлемент ::scroll-marker-group).

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

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

Примеры

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

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

В этом примере показано, как создать маркеры прокрутки для CSS-карусели.

HTML

У нас есть простой список HTML <ul> с несколькими элементами списка <li>.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
</ul>

CSS

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

Мы создаём контейнер группы маркеров прокрутки с помощью свойства scroll-marker-group, размещая его после всего содержимого.

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

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

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

Затем мы используем псевдоэлемент ::scroll-marker, чтобы создать квадратный маркер с красной рамкой для каждого элемента списка:

li::scroll-marker {
  content: "";
  border: 1px solid red;
  height: 1em;
  width: 1em;
}

Мы также применяем стили к псевдоэлементу ::scroll-marker-group, чтобы расположить маркеры прокрутки по центру строки с промежутком 0.4em между ними:

::scroll-marker-group {
  display: flex;
  gap: 0.4em;
  place-content: center;
}

Наконец, мы задаём маркеру текущего прокручиваемого элемента стиль, отличающийся от стилей остальных маркеров, используя псевдокласс :target-current.

::scroll-marker:target-current {
  background: red;
}

Результат

Пользовательская нумерация и стиль маркеров прокрутки

Этот пример аналогичен предыдущему, но маркеры прокрутки оформлены иначе, а для увеличения отображаемого на каждом маркере числа используются счётчики CSS. Различия в CSS описаны в следующем разделе.

CSS

В этом примере с помощью свойства counter-increment задаётся имя счётчика, который нужно увеличивать для каждого <li> — markers:

li {
  counter-increment: markers;
}

Затем для свойства content псевдоэлемента ::scroll-marker задаётся функция counter(), которой в качестве аргумента передаётся имя счётчика markers. В результате в каждый маркер автоматически добавляется увеличивающееся число. Остальные стили довольно просты, но они показывают, что маркеры можно полностью оформить.

li::scroll-marker {
  content: counter(markers);
  font-family: sans-serif;
  width: fit-content;
  height: 1em;
  padding: 5px;
  color: black;
  text-decoration: none;
  border: 2px solid rgb(0 0 0 / 0.15);
  border-radius: 0.5em;
  background-color: #eeeeee;
}

Для ещё одной интересной настройки мы добавляем в цепочку селекторов два правила, чтобы выбрать маркеры первого и последнего элементов списка, соответственно добавляя :first-child и :last-child. Текст первого маркера задаём как «Первый», а последнего — как «Последний».

li:first-child::scroll-marker {
  content: "First";
}

li:last-child::scroll-marker {
  content: "Last";
}

Чтобы улучшить взаимодействие с пользователем, мы задаём маркерам другой цвет при наведении :hover и используем псевдокласс :target-current, чтобы изменить свойства color и background-color маркера текущего прокручиваемого элемента. Так пользователи смогут понять, какой элемент сейчас виден:

::scroll-marker:hover {
  background-color: #ddcccc;
}

::scroll-marker:target-current {
  background-color: purple;
  color: white;
}

Результат

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

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

См. также

• scroll-marker-group
• scroll-target-group
• ::scroll-button()
• ::scroll-marker-group
• :target-current
• :target-before
• :target-after
• Создание CSS-каруселей
• Списки и счётчики CSS — модуль
• Переполнение CSS — модуль
• Галерея CSS-каруселей на chrome.dev (2025)