scroll-timeline-axis

Ограниченная доступность

Эта функция не относится к Baseline, так как она не работает в некоторых из наиболее широко используемых браузеров.

Экспериментально: Это экспериментальная технология
Перед использованием в производстве тщательно проверьте таблицу совместимости с браузерами.

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

Примечание: Если элемент прокручивателя не выходит за пределы своего контейнера по заданной оси, или если переполнение скрыто или обрезано, временная шкала прогресса прокрутки не будет создана.

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

Синтаксис

/* Logical property values */
scroll-timeline-axis: block;
scroll-timeline-axis: inline;
/* Non-logical property values */
scroll-timeline-axis: y;
scroll-timeline-axis: x;

Значения

Допустимые значения для scroll-timeline-axis:

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

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

Начальное значение	`block`
Применимо к	контейнеры прокрутки
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	Не анимируемо

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

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

Примеры

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

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

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

HTML

Ниже показан HTML для примера.

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

CSS

CSS для контейнера устанавливает :root как источник временной шкалы прогресса прокрутки с именем --myScroller с помощью свойства scroll-timeline-name. Ось прокрутки устанавливается с помощью scroll-timeline-axis: x; (Chromium) и scroll-timeline-axis: horizontal; (Firefox) — это приводит к тому, что положение *горизонтальной полосы прокрутки* определяет временную шкалу анимации.

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

Стоит также отметить, что элементу .animation применяется временная шкала с помощью animation-timeline: --myScroller;, а также применяется animation-duration для того, чтобы пример работал в Firefox.

:root {
  scroll-timeline-name: --myScroller;

  /* Chromium supports the new x/y syntax */
  scroll-timeline-axis: x;
  /* Firefox still supports the old horizontal/vertical syntax */
  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;
  animation-timeline: --myScroller;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
}

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

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

Результат

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

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

Спецификация
Анимации, управляемые прокруткой # propdef-scroll-timeline-axis

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

	Рабочие столы					Мобильные устройства
	Хром	Кром. Edge	Firefox	Opera	Safari	Хром для Android	Firefox для Android	Opera для Android	Safari на iOS	Samsung Internet	WebView Android
`scroll-timeline-axis`	115	115	111 ["Синтаксис сокращённого свойства использует фиксированный порядок: имя, затем ось.", "Поддерживает устаревшие значения `horizontal` и `vertical`, а не значения `x` и `y`.", "Правило `@scroll-timeline` заменено на свойства `scroll-timeline-name` и `scroll-timeline-axis`, и сокращённое свойство `scroll-timeline`."]	101	Нет	115	Нет	77	Нет	23.0	115
`block`	115	115	Нет	101	Нет	115	Нет	77	Нет	23.0	115
`inline`	115	115	Нет	101	Нет	115	Нет	77	Нет	23.0	115
`x`	115	115	Нет	101	Нет	115	Нет	77	Нет	23.0	115
`y`	115	115	Нет	101	Нет	115	Нет	77	Нет	23.0	115

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-timeline-axis