Because Scroll-Driven Animations are only active when there is scrollable overflow, it is possible to use them as a mechanism to detect if an element

Solved by CSS Scroll-Driven Animations: Detect if an element can scroll or not

submited by
Style Pass
2024-11-06 16:00:07

Because Scroll-Driven Animations are only active when there is scrollable overflow, it is possible to use them as a mechanism to detect if an element can scroll or not. Mix in a Space Toggle or a Style Query, and you’ve got all you need to selectively style an element based on it being scrollable or not.

A Scroll-Driven Animation is an animation that is driven by scroll. But what if there is no scroll distance to animate on, what happens then? Well, the spec has this covered, and states that the animation is inactive in that case:

If the source of a ScrollTimeline is an element whose principal box does not exist or is not a scroll container, or if there is no scrollable overflow, then the ScrollTimeline is inactive.

In a scroll container that has no scrollable overflow, the animation won’t be active, and thus the text will have the color that was declared on it.

When attached as a Scroll-Driven Animation to a scroll container that has no scrollable overflow, the value of the custom property would be initial, because it is not set.

Leave a Comment