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

Next lesson: View function

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies