Add user scroll events on:scrollUp and on:scrollDown

[CrystalOnScript]

Describe the new feature or change to an existing feature you'd like to see

A way to dispatch events based on the user's scroll direction. This would be great for animations, such as a header that's removed when the user scrolls down and reappears when the user scroll up again. Might be nice to be able to put a range of scrolling: on:scrollUp.100vh.event for full screen scrolling and on:scrollUp.1vh.event for any user scroll interaction.

Describe alternatives you've considered

Original thought was to make it an event, but may not work as desired if needs to be attached to an existing element. Maybe work as <amp-scroll-tracker>?

[aghassemi]

@CrystalFaith We were originally thinking to create a dedicated component for the scroll-direction-based sticky headers, but I like your proposal much better as it is generic and maybe useful for other cases as well. Aligns nicely with amp-position-observer pattern too.

[aghassemi]

@nainar Lots of thumbs up on this request. Setting a P1

[nainar]

@aghassemi has added this to our Fixit week task list.

[alanorozco]

Closing this in favor of #20881 unless anyone objects. Those interested in this feature can follow that issue instead. It has been prioritized so you folks can all expect it soon!