CSS function scroll()

Опис

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

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

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

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

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

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

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

Синтаксис

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

<scroller>

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

<axis>

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

Переглядачі

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

Приклади

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