Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scroll position jumps when dragging scrollbar after wheel #168

Closed
TheoGil opened this issue May 4, 2023 · 6 comments
Closed

Scroll position jumps when dragging scrollbar after wheel #168

TheoGil opened this issue May 4, 2023 · 6 comments

Comments

@TheoGil
Copy link

TheoGil commented May 4, 2023

Describe the bug

The scroll position keeps jumping back to its previous value while dragging the native scrollbar. Jumping back and forth between its previous position and its desired position, ultimately going back to its previous position, preventing user from scrolling by dragging the browser scrollbar.

To Reproduce

It is subtle but reproducible on the minimal lenis setup codepen, the issue is even more obvious on the Lenis demo page (see screencasts below) :

  1. Scroll a little bit using the mouse wheel. The scroll must ends between its minimum and maximum position. Bug does not appear when scrolling all the way down or all the way up.
  2. Try to scroll by grabbing the browser scrollbar.

Additional information :

My intuition is that the wheel triggered scroll position tween never completes, thus keeping the scroll position in a locked state (?) 🤔

I'm using Chrome 112 on OS X 10 : https://www.whatsmybrowser.org/b/G7TID.

On Safari 16.2 on OS X 10, the scrollbar does not move at all when trying to drag it.

Potentially related issues : https://github.com/studio-freight/lenis/issues/107 https://github.com/studio-freight/lenis/issues/65

See screencasts below :

lenis-issue-1.mp4
lenis-issue-2.mp4
@TheoGil
Copy link
Author

TheoGil commented May 4, 2023

It does indeed look like this condition https://github.com/studio-freight/lenis/blob/main/src/animate.js#L13 could never be truthy in my case since this.to is not an integer and will never be equal to anything coming out of Math.round 🤔

I've yet to succeed debugging it locally but will investigate further and will submit a PR if I manage to fix it.

Capture d’écran 2023-05-04 à 16 30 41

TheoGil referenced this issue in TheoGil/lenis May 4, 2023
Fixes never ending lerping when to is not an integer thus never passing the Math.round check to determine animation completion. See https://github.com/studio-freight/lenis/issues/168
@TheoGil
Copy link
Author

TheoGil commented May 4, 2023

Here a PR : seems almost too easy to be true but it does seems to work : https://github.com/studio-freight/lenis/pull/169

@clementroche
Copy link
Member

Thank you for your issue, i wish every issue to be described this good.
I think it's coming from this line https://github.com/studio-freight/lenis/blob/main/src/index.js#L333

@clementroche
Copy link
Member

it should be fixed on v1.0.12

@TheoGil
Copy link
Author

TheoGil commented May 8, 2023

It is fixed, thanks! 🙏

@TheoGil TheoGil closed this as completed May 8, 2023
@Hiei16
Copy link

Hiei16 commented Jul 9, 2024

Hello, this issue seems to be back in version 1.0.42. I have it and the demo website has it too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants