search

ckrack / scrollsnap-polyfill

A polyfill for CSS scroll snapping
MIT License
217 stars 35 forks source link

Make smooth scroll cancellable #7

Open Martin-Pitt opened 8 years ago

Martin-Pitt commented 8 years ago

Here is an implementation of smooth scroll that is cancellable by the user.

It was really annoying having my scroll constantly hijacked by the smooth scroll. (Macbook with trackpad - I was scrolling really slowly :disappointed:)

To fix this, we use cause and effect. Programmatic scroll kicks in the scroll events, thus we remember what value we intended to smooth scroll to. If user initiates their own movement, this will show as a difference to our intended scroll position and therefore cancel our smooth scroll immediately.

On a side note: That does make me wonder what would happen in a native snap scroll implementation world; What happens when your JS scrolls programmatically against a snap scroll enabled container, what does native snap scroll do in that situation?

Martin-Pitt commented 8 years ago

By the way, forgot to add this: This definitely needs some cross-platform testing. I'll see what I can do, but any help is appreciated.

Have tried on a macbook (trackpad) with Chrome, Firefox & Safari so far.

Martin-Pitt commented 8 years ago

This commit fails when scroll is body, e.g. it's relying on lastScrollObj vs lastObj as it needs to set its' own scroll event listener internally to check if user has moved.

I'm not sure how to proceed to untangle this. Should the caller pass lastObj as well into smoothScroll?