CSS scroll() — часова шкала від прокручування

Опис

Експериментальна технологія: Перед використанням уважно перевірте таблицю сумісності з браузерами.

Функція scroll() представляє собою інструмент у CSS, який контролює поведінку прокрутки в рамках заданого елементу. Ця функція визначає, яким елементом буде кореневий елемент, що надає часову шкалу прокрутки, або ж використовує найближчий батьківський елемент, що має прокрутку.

Визначення прокрутки може бути гнучким, дозволяючи вказати вісь прокрутки для часової шкали. Це може включати вертикальну або горизонтальну вісь, залежно від напрямку тексту. Така гнучкість робить функцію scroll() корисною для більш точного контролю над анімацією та прокруткою.

Наприклад, використання scroll(block nearest) вказує, що найближчий батьківський елемент, що має прокрутку, буде джерелом часової шкали, а вісь прокрутки буде визначена у напрямку блоку.

Приклад роботи функції:

#square {
  animation-timeline: scroll(block nearest);
  /* інші стилі */
}

В цьому прикладі, елемент з ідентифікатором square буде анімований з використанням анонімної часової шкали прокрутки, яка надається найближчим батьківським елементом з прокруткою у напрямку блоку. Це дозволяє створювати динамічні анімації, які реагують на дії користувача, такі як прокрутка, надаючи більш відзивчивий та живий досвід користувача.

правити

Загальний опис

правити

Порада

Переконайтеся, що ви правильно вказали елемент, що надає часову шкалу прокрутки, і вісь прокрутки для досягнення очікуваного ефекту анімації.

автор: Bond правити

Нотатка

При використанні функції scroll(), переконайтеся, що вказаний елемент дійсно має прокрутку у вибраній вісі, інакше часова шкала буде неактивною.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

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

Функція scroll може отримувати 2 значень:

<scroller>

Значення може бути або nearest (найближчий батьківський елемент з прокруткою у будь-якій вісі), або root (кореневий елемент документа), в залежності від того, який елемент слід використовувати для надання часової шкали прокрутки для анімації.

автор: Bond

правити

<axis>

Значення може бути або block (вертикальна або горизонтальна вісь прокрутки блока) або inline (горизонтальна або вертикальна вісь прокрутки рядка), в залежності від напрямку тексту в контейнері.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	115	115

Підтримка: мобільні переглядачі

Переглядач
	115	115

Приклади

+ запропонувати свій приклад у пісочниці

<div id="description">
  <h2>Смужка прогресу на scroll()</h2>
  <p>Прокрутіть текст у рамці. Заливка смужки прив'язана не до часу, а до прокрутки найближчого предка.</p>
</div>

<div id="result">
  <div class="scroller">
    <div class="track"><div class="fill"></div></div>
    <p>Часова шкала прокрутки — це не таймер. Анімація не має тривалості: нульовий кадр відповідає початку прокрутки, останній — кінцю.</p>
    <p>Прокрутіть назад — і анімація відмотається назад так само точно. Ніякого скрипта, ніякого обробника подій.</p>
    <p>Джерелом шкали тут є сам цей блок: він найближчий предок смужки, у якого є прокрутка.</p>
    <p>Якби вміст помістився без прокрутки, шкали б не існувало — і смужка застигла б на першому кадрі.</p>
    <p>Вісь block означає напрямок письма. Для звичайного українського тексту це вертикаль.</p>
    <p>Кінець тексту. Смужка вгорі має бути заповнена повністю.</p>
  </div>
</div>

#description {
  background: #f2f2f2;
  padding: 20px;
  font-family: Arial, sans-serif;
}

#result {
  padding: 24px;
  font-family: Arial, sans-serif;
}

.scroller {
  height: 220px;
  overflow-y: auto;
  border: 2px solid #999;
  padding: 0 16px 16px;
  background: #fff;
}

.track {
  position: sticky;
  top: 0;
  height: 10px;
  margin: 0 -16px 14px;
  background: #e0e0e0;
}

.fill {
  height: 100%;
  background: #ff6347;
  transform: scaleX(1);
  transform-origin: left center;
  animation-name: progress;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-timeline: scroll(nearest block);
}

@keyframes progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.scroller p {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}