scroll()

scroller

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

nearest

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

root

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

self

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

axis

Значение оси полосы прокрутки может быть одним из следующих:

block

Полоса прокрутки на оси блока контейнера прокрутки, которая является осью, перпендикулярной направлению потока текста в строке. Для горизонтальных режимов написания, таких как стандартный английский, это то же самое, что и y, а для вертикальных режимов написания — то же самое, что и x. Это значение по умолчанию.

inline

Полоса прокрутки на оси вставки контейнера прокрутки, которая является осью, параллельной направлению потока текста в строке. Для горизонтальных режимов написания это то же самое, что и x, а для вертикальных режимов написания — то же самое, что и y.

y

Полоса прокрутки по вертикальной оси контейнера прокрутки.

x

Полоса прокрутки по горизонтальной оси контейнера прокрутки.

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

Результат

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

• Анимации, управляемые прокруткой CSS
• Использование CSS-анимаций
• animation-timeline