Свойство CSS `scroll-timeline-axis`

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

Синтаксис

/* Logical property values */
scroll-timeline-axis: block;
scroll-timeline-axis: inline;

/* Physical property values */
scroll-timeline-axis: y;
scroll-timeline-axis: x;

/* Global values */
scroll-timeline-axis: inherit;
scroll-timeline-axis: initial;
scroll-timeline-axis: revert;
scroll-timeline-axis: revert-layer;
scroll-timeline-axis: unset;

Значения

<axis>

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

Описание

Свойство scroll-timeline-axis указывает, какая полоса прокрутки будет использоваться для создания анимации с временной шкалой прогресса прокрутки. Значение задаёт <axis> полосы прокрутки. Свойство scroll-timeline задаётся для контейнера прокрутки, который будет предоставлять временную шкалу.

Если элемент-контейнер прокрутки не переполняет контейнер по соответствующей оси или если переполнение скрыто либо обрезано, временная шкала прогресса прокрутки создана не будет.

Свойства scroll-timeline-axis и scroll-timeline-name также можно задать с помощью сокращённого свойства scroll-timeline.

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

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

scroll-timeline-axis = 
  [ block | inline | x | y ]#

Примеры

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

В этом примере временная шкала прогресса прокрутки с именем --my-scroller задаётся с помощью свойства scroll-timeline-name для элемента :root (<html>). Затем эта временная шкала применяется к анимации элемента с классом animation с помощью animation-timeline: --my-scroller.

Чтобы продемонстрировать действие свойства scroll-timeline-axis, в этом примере для управления анимацией используется горизонтальная полоса прокрутки (не установленная по умолчанию).

HTML

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

<body>
  <div class="content"></div>
  <div class="box animation"></div>
</body>

CSS

В CSS для контейнера задаётся :root в качестве источника временной шкалы прогресса прокрутки с именем --my-scroller с помощью свойства scroll-timeline-name. Ось прокрутки задаётся с помощью scroll-timeline-axis: x;, поэтому положение горизонтальной полосы прокрутки определяет временную шкалу анимации. Мы также добавляем scroll-timeline-axis: horizontal; для браузеров, поддерживающих нестандартные устаревшие значения horizontal и vertical, но не x и y.

Для элемента .content задаётся большая ширина, чтобы он переполнял элемент :root.

К элементу .animation применяется анимация с помощью сокращённого свойства animation, а временная шкала прокрутки задаётся с помощью свойства animation-timeline.

:root {
  scroll-timeline-name: --my-scroller;

  scroll-timeline-axis: x;
  scroll-timeline-axis: horizontal;
}

body {
  margin: 0;
  overflow-y: hidden;
}

.content {
  height: 100vh;
  width: 2000px;
}

.box {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: rebeccapurple;
  position: fixed;
  top: 25px;
  left: 25px;
}

.animation {
  animation: rotate-appear 1ms linear;
  animation-timeline: --my-scroller;
}

@keyframes rotate-appear {
  from {
    rotate: 0deg;
    top: 0%;
  }

  to {
    rotate: 720deg;
    top: 100%;
  }
}

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

Результат

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

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

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

См. также

• animation-timeline
• scroll-timeline
• scroll-timeline-name
• Временные шкалы анимации, управляемой прокруткой
• Модуль CSS-анимации, управляемые прокруткой