Recognize scroll as an action and observe relative movement

[jeremyfelt]

When scroll is the action and observe-scroll is also a class added to the observed element, listen to the scroll event when one or more "scrollers" is intersecting and track its scroll position relative to where it was originally triggered.

Scroll position is added as a custom property: --distance-from-trigger

As an example, given an element with these classes:

• observe-trigger-10-top-scroll
• observe-scroll

Once the top of the element intersects the top 10% of the viewport, a --distance-from-trigger property will be added to its inline style with the top of the element's current pixel difference from that intersection. As it moves up the viewport, the distance will increase. If it moves down the viewport, the distance will decrease.

Once the element is no longer intersecting (distance of < 0), the scroll event will be removed.

That's the best I have at explaining it. 😆

In this branch, you can view demo/scrollers.html to see a working iteration.

[jeremyfelt]

Bugs so far:

• We probably need an active class like is-observed-scroller or something so that we have the option to apply certain rules only to active scrollers and then have a fallback when the class is removed.
• It's possible for --distance-from-trigger to get stuck at something like 0.2857 rather than 0 when it's done intersecting. This should be set to 0 when it crosses back over the original trigger point.

[jeremyfelt]

This is probably reinventing the scroll-timeline wheel. 🙃 https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-timeline

Going to consider this on hold unless we determine that watching scroll is very necessary for something else.