search

davideperozzi / smoovy

A collection of small and useful js packages (smooth scrolling, router, parallax, webgl, utils, etc.) preventing copy & paste
MIT License
81 stars 8 forks source link

Callback for when element has finished scrolling #11

Closed adamrobinson closed 4 years ago

adamrobinson commented 4 years ago

Hi,

I'm using the scroller.scrollTo() method but need a callback to fire once its finished scrolling. Is there any easy way to achieve this?

Great work by the way. Especially like the fact that tabbing works so well (which was a requirement for accessibility for me)

davideperozzi commented 4 years ago

Hi

Thank you!

Yes, this is a bit tricky with the 'scrollTo' method, as the user can intercept the animation at any time, and finding a way to tell when the programmatic call is finished could become quite complex.

I think you have two options here:

  1. If you agree to use the `tweenTo' method, I could implement a callback method or return a promise. Because with 'tweenTo' you can prevent user interaction and force the animation to the desired position. This is something on my todo list anyway.

  2. You could save the desired position and check if the position coming from 'onOutput' matches the previously saved position. In addition to this check, you would need another check to determine if the user has done anything to prevent the scroll animation from reaching the destination (e.g. wheel, touchmove). Of course, this does not take into account other programmatic calls or some corrections that come from the core. But it should be sufficient. Since you know that you are checking the position, you could prevent other components from messing up the scroll position during the animation.

adamrobinson commented 4 years ago

Hi,

Number 1 seems like something i could definitely be of use (but like you say its already on your todo).

But as it turns out ive actually not needed this in the end (head in hands moment)

I had a set of in page jump links that should smooth scroll down to the target element. I was then trying toset focus to that element after the scroll had finished. But realised after my 3rd coffee that as tabbing works well with this library - i shouldnt need to programatically set the scroll, and just tried setting focus. And bingo it just auto scrolls to the point i need.

Thanks anyway. This really is the best smooth scroll library ive tried as so many of them break as soon as your try to navigate with the tab key.

davideperozzi commented 4 years ago

@adamrobinson I'm glad it works for you now and thank you! :)