Amphtml: Add user scroll events `on:scrollUp` and `on:scrollDown`

Created on 2 Jan 2019  路  4Comments  路  Source: ampproject/amphtml

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>?

Feature Request

Most helpful comment

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

All 4 comments

@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.

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

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

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!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ericlindley-g picture ericlindley-g  路  117Comments

ericlindley-g picture ericlindley-g  路  60Comments

choumx picture choumx  路  113Comments

darobin picture darobin  路  48Comments

zhouyx picture zhouyx  路  60Comments