CSS function scroll

Опис

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

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

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

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

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


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

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

автор: Bond

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

Синтаксис

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

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

<scroller>

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

автор: Bond

<axis>

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

автор: Bond

Переглядачі

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

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

Приклади

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

Прикладів ще не додано

Коментарі

Коментарів ще немає — будьте першим!