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

::scroll-button() — это CSS-псевдоэлемент, представляющий кнопку для управления прокруткой контейнера прокрутки. Они создаются в контейнерах прокрутки, если значение их свойства content не равно none. Направление прокрутки определяется значением параметра.

Синтаксис

::scroll-button(<scroll-button-direction>) {
  /* ... */
}

Параметры

<scroll-button-direction>

Значение, указывающее, какую кнопку прокрутки нужно выбрать. Доступны следующие значения:

*

Выбирает все кнопки прокрутки исходного элемента, позволяя задать стили для каждой из них в одном правиле.

down

Выбирает кнопку, которая прокручивает содержимое вниз.

left

Выбирает кнопку, которая прокручивает содержимое влево.

right

Выбирает кнопку, которая прокручивает содержимое вправо.

up

Выбирает кнопку, которая прокручивает содержимое вверх.

block-end

Выбирает кнопку, которая прокручивает содержимое в направлении block-end.

block-start

Выбирает кнопку, которая прокручивает содержимое в направлении block-start.

inline-end

Выбирает кнопку, которая прокручивает содержимое в направлении inline-end.

inline-start

Выбирает кнопку, которая прокручивает содержимое в направлении inline-start.

В спецификации также определены два других значения — next и prev, — но в настоящее время они не поддерживаются ни одним браузером.

Описание

Псевдоэлементы ::scroll-button() создаются внутри контейнера прокрутки, только если для их свойств content задано значение, отличное от none. Они создаются как элементы-братья дочерних DOM-элементов контейнера прокрутки, непосредственно перед ними и любым элементом ::scroll-marker-group, созданным в контейнере.

Для каждого контейнера прокрутки можно создать до четырёх кнопок прокрутки, которые будут прокручивать содержимое к началу и концу блочной и строчной осей. Аргумент селектора указывает выбранное направление прокрутки. Можно также задать значение *, чтобы выбрать все псевдоэлементы ::scroll-button() и задать стили для всех кнопок в одном правиле.

Созданные кнопки ведут себя как обычные элементы <button>, в том числе используют стандартные стили браузера. Они могут получать фокус, доступны для вспомогательных технологий и активируются как обычные кнопки. При нажатии кнопки прокрутки содержимое контейнера прокрутки сдвигается в указанном направлении на одну «страницу», то есть примерно на размер контейнера прокрутки, подобно нажатию клавиш PgUp и PgDn.

Рекомендуется настроить привязку прокрутки CSS для контейнера прокрутки и задать для каждого отдельного элемента содержимого, к которому нужно прокручивать, значение цели привязки. В таком случае при активации кнопки прокрутки содержимое будет прокручиваться к цели привязки, находящейся на расстоянии одной «страницы». Кнопки прокрутки работают и без привязки прокрутки, однако результат может оказаться не таким, как ожидалось.

Если прокрутка в направлении конкретной кнопки прокрутки больше невозможна, эта кнопка автоматически отключается; в противном случае она включена. Стили кнопок прокрутки в активном и отключённом состояниях можно задавать с помощью псевдоклассов :enabled и :disabled.

Примеры

Другие примеры каруселей см. в разделе Создание каруселей 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.

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: 100px;
  padding-top: 20px;
  scroll-snap-align: start;
  text-align: center;
}

Создание кнопок прокрутки

Сначала для всех кнопок прокрутки задаются базовые стили, а также стили для разных состояний. Важно задать стили :focus для пользователей клавиатуры. Кроме того, кнопки прокрутки автоматически получают атрибут disabled, когда прокрутка в соответствующем направлении больше невозможна, поэтому для этого состояния мы используем псевдокласс :disabled.

ul::scroll-button(*) {
  border: 0;
  font-size: 2rem;
  background: none;
  color: black;
  opacity: 0.7;
  cursor: pointer;
}

ul::scroll-button(*):hover,
ul::scroll-button(*):focus {
  opacity: 1;
}

ul::scroll-button(*):active {
  translate: 1px 1px;
}

ul::scroll-button(*):disabled {
  opacity: 0.2;
  cursor: unset;
}

Затем для левой и правой кнопок прокрутки задаются соответствующие значки с помощью свойства content, которое также отвечает за создание кнопок прокрутки:

ul::scroll-button(left) {
  content: "◄";
}

ul::scroll-button(right) {
  content: "►";
}

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

Результат

Обратите внимание, что кнопки прокрутки расположены в карусели внизу слева. Нажмите на них, чтобы увидеть, как прокручивается содержимое.

Позиционирование кнопок прокрутки

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

CSS

Сначала для <ul> задаётся ссылка anchor-name, определяющая его как именованный якорь. Затем для каждой кнопки прокрутки задаётся значение absolute свойства position, а свойству position-anchor задаётся значение anchor-name списка, чтобы связать их друг с другом.

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

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

Чтобы задать положение каждой кнопки прокрутки, сначала зададим для обеих значение anchor-center свойства align-self, чтобы выровнять их по центру карусели по вертикали:

ul::scroll-button(*) {
  align-self: anchor-center;
}

Затем зададим значения свойствам вставки, отвечающим за горизонтальное позиционирование. Мы используем функции anchor(), чтобы расположить указанные стороны кнопок относительно сторон карусели. В каждом случае функция calc() добавляет пространство между краем кнопки и краем карусели. Например, правый край левой кнопки прокрутки располагается на 45 пикселей правее левого края карусели.

ul::scroll-button(left) {
  right: calc(anchor(left) - 45px);
}

ul::scroll-button(right) {
  left: calc(anchor(right) - 45px);
}

Результат

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

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

См. также

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