CSS function 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

Приклади

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

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