CSS-функция `scroll()`

scroll() — это функция CSS, которую можно использовать со свойством animation-timeline для создания анонимной временной шкалы прогресса прокрутки, задавая прокручиваемый элемент и ось временной шкалы.

Синтаксис

/* No arguments */
animation-timeline: scroll();

/* <scroller> argument only */
animation-timeline: scroll(nearest);
animation-timeline: scroll(root);
animation-timeline: scroll(self);

/*`<axis>` argument only */
animation-timeline: scroll(block);
animation-timeline: scroll(inline);
animation-timeline: scroll(y);
animation-timeline: scroll(x);

/* <scroller> and <axis> */
animation-timeline: scroll(block nearest);
animation-timeline: scroll(inline root);
animation-timeline: scroll(x self);

Параметры

<scroller>

Элемент, прокрутка которого будет задавать временную шкалу прогресса прокрутки. Допустимые значения:

nearest

Ближайший предок текущего элемента, у которого есть полосы прокрутки по любой из осей. Это значение по умолчанию.

root

Корневой элемент документа.

self

Сам текущий элемент.

<axis>

Ключевое слово <axis>, обозначающее направление или ось области прокрутки, которая управляет анимацией с управлением прокруткой. Значение по умолчанию — block.

Описание

Функцию CSS scroll() можно использовать как отдельное значение в списке значений, разделённых запятыми, свойства animation-timeline, чтобы задать временную шкалу прогресса прокрутки для анимации @keyframes. Она определяет прокручиваемый элемент (прокручиваемый элемент) и ось полосы прокрутки, которые будут задавать временную шкалу анимации.

По умолчанию scroll() ссылается на ось block ближайшего контейнера прокрутки-предка nearest. Значения прокручиваемого элемента и оси можно указывать в любом порядке.

Следующие пять объявлений эквивалентны:

animation-timeline: scroll();
animation-timeline: scroll(block);
animation-timeline: scroll(nearest);
animation-timeline: scroll(block nearest);
animation-timeline: scroll(nearest block);

Временная шкала прогресса прокрутки изменяется при прокрутке элемента по горизонтали или вертикали — в зависимости от <axis> и режима письма. Если для указанной оси нет полосы прокрутки, временная шкала анимации будет неактивна.

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

<scroll()> = 
  scroll( [ <scroller> || <axis> ]? )

<scroller> = 
  root |
  nearest |
  self

<axis> = 
  block |
  inline |
  x |
  y

Примеры

Задание анонимной временной шкалы прогресса прокрутки

В этом примере элемент #square анимируется с помощью анонимной временной шкалы прогресса прокрутки, которая применяется к анимируемому элементу с помощью функции scroll(). В данном примере временную шкалу задаёт ближайший родительский элемент с любой полосой прокрутки — полоса прокрутки в блочном направлении.

HTML

HTML-код примера приведён ниже.

<div id="container">
  <div id="square"></div>
  <div id="stretcher"></div>
</div>

CSS

Приведённый ниже CSS задаёт квадрат, который вращается в разных направлениях в соответствии с временной шкалой, определяемой свойством animation-timeline. В данном случае временная шкала задаётся значением scroll(block nearest), то есть выбирается полоса прокрутки в блочном направлении ближайшего родительского элемента, у которого есть полосы прокрутки; в данном случае — вертикальная полоса прокрутки элемента "container".

#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  margin-top: 100px;
  position: absolute;
  bottom: 0;

  animation-name: rotateAnimation;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
  animation-direction: alternate;
  animation-timeline: scroll(block nearest);
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

CSS-код для контейнера задаёт его высоту равной 300px и включает вертикальную полосу прокрутки, если содержимое выходит за его границы. CSS для "stretcher" задаёт высоту в блочном направлении равной 600px, из-за чего содержимое выходит за границы контейнера. В совокупности эти правила обеспечивают наличие у контейнера вертикальной полосы прокрутки, благодаря чему его можно использовать как источник анонимной временной шкалы прогресса прокрутки.

#container {
  height: 300px;
  overflow-y: scroll;
  position: relative;
}

#stretcher {
  height: 600px;
}

@layer no-support {
  @supports not (animation-timeline: scroll()) {
    body::before {
      content: "Your browser doesn't support the CSS `scroll()` function.";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

Результат

Прокрутите страницу, чтобы увидеть анимацию квадратного элемента.

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

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

См. также

• Использование CSS-анимаций
• Модуль CSS-анимации
• Модуль CSS-анимации с управлением прокруткой
• ScrollTimeline
• API веб-анимаций