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

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

Синтаксис

/* Single values */
scroll-marker-group: before;
scroll-marker-group: after;
scroll-marker-group: none;

/* Global values */
scroll-marker-group: inherit;
scroll-marker-group: initial;
scroll-marker-group: revert;
scroll-marker-group: revert-layer;
scroll-marker-group: unset;

Значения

Для этого свойства указывается одно из следующих ключевых слов:

after

Псевдоэлемент ::scroll-marker-group создаётся как соседний элемент DOM-элементов-потомков контейнера прокрутки — непосредственно перед ними и любыми сгенерированными псевдоэлементами ::scroll-button(). Он располагается в конце порядка перехода клавишей Tab и порядка блоков макета контейнера (но не в структуре DOM).

before

Псевдоэлемент ::scroll-marker-group создаётся как соседний элемент DOM-элементов-потомков контейнера прокрутки — непосредственно перед ними и любыми сгенерированными псевдоэлементами ::scroll-button(). Группа маркеров прокрутки располагается в начале порядка перехода клавишей Tab и порядка блоков макета контейнера.

none

Для элемента не будет создан псевдоэлемент ::scroll-marker-group. Это значение по умолчанию.

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

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

scroll-marker-group = 
  none |
  before |
  after

Примеры

Полные примеры использования свойства scroll-marker-group см. в статье Создание каруселей с помощью CSS.

Размещение маркеров прокрутки

В этом примере показаны три значения свойства scroll-marker-group.

HTML

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

<fieldset>
  <legend>Select <code>scroll-marker-group</code> value:</legend>
  <label><input type="radio" name="p" value="before" />before</label>
  <label><input type="radio" name="p" value="after" checked />after</label>
  <label><input type="radio" name="p" value="none" />none</label>
</fieldset>

<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;
  margin: 32px 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%;
  scroll-snap-align: start;
  text-align: center;
  line-height: 5;
}

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

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

::scroll-marker-group {
  display: flex;
  gap: 0.2em;
}

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

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

fieldset {
  width: 20em;
}

label {
  font-family: monospace;
  display: block;
}

:has([value="before"]:checked) ul {
  scroll-marker-group: before;
}
:has([value="after"]:checked) ul {
  scroll-marker-group: after;
}

:has([value="none"]:checked) ul {
  scroll-marker-group: none;
}

Результат

Обратите внимание на расположение контейнера группы маркеров прокрутки. Сравните порядок перехода клавишей Tab для before и after, а также обратите внимание, что группа исчезает, когда задано значение none.

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

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

См. также

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