Scroll function
Learn the scroll() function.
Arguments of the scroll() function
The scroll() function takes two arguments: axis and source. The axis sets the scroll direction; it can be block (vertical, default) or inline (horizontal).
The source chooses which container's scroll drives the timeline; it can be nearest (default) or root. For example, scroll(block nearest) is the same as scroll().
Source: nearest and root
The source argument chooses which scrollable element drives the timeline. nearest (default) uses the nearest scrollable ancestor of the animated element; great for nested scroll areas.
root uses the document viewport (the main page scroll). For a progress bar that tracks the whole page, write scroll(root).
Exercise Animation bound to the page root scroll
Write a CSS block. This block must contain the animation-timeline: scroll(root block) declaration. Both root and block arguments must appear inside scroll(); order does not matter.
Show example solution
/* page root scroll */
.progress {
animation-timeline: scroll(root block);
}Test yourself
-
What are the two arguments of the scroll() function?
- axis and duration
- axis and source
- axis and offset
- source and delay
Show answer
axis and source — Correct. The scroll() function takes two arguments: axis and source.
-
Write the block axis explicitly
/* vertical block axis */ animation-timeline: scroll(____ nearest);Show answer
/* vertical block axis */ animation-timeline: scroll(block nearest); -
Match each argument to its meaning
- block
- Vertical (block) axis
- inline
- Horizontal (inline) axis
- nearest
- Nearest scrollable ancestor
- root
- Document root, viewport