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

scrollTo with lock: true does not stop ongoing touch move scrolling on mobile #315

Open
imbachb opened this issue Mar 12, 2024 · 4 comments
Labels
bug Something isn't working

Comments

@imbachb
Copy link

imbachb commented Mar 12, 2024

scrollTo does not seem to prevent ongoing touch move scrolling on mobile, even when specifying lock: true.

The "bug" is reproducible with following steps:

  • User on mobile keeps finger on screen, i.e is touchmoving
  • At the same time the application uses scrollTo with lock: true
  • The scroll animation starts
  • If the user does not let go of the touch but moves the finger, the page jitters back and forth between starting point and scrollTo animation progress.

The issue is easily reproducible with following codepen. The codepen uses scrollTo every few seconds to scroll to different sections.
https://codepen.io/imbachb/pen/bGJeawM

If you try it via desktop browser inspection tools in mobile mode it does not jitter but it produces many errors in the console.
[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted
On mobile (I could only try iOS so far) the jitter is present.

Is this a bug? Or is there a workaround for this issue?
I'm trying to replicate this effect from https://www.david-hckh.com/ which seems to handle this problem perfectly.

@clementroche clementroche added the bug Something isn't working label Mar 13, 2024
@imbachb
Copy link
Author

imbachb commented Mar 24, 2024

Setting syncTouch to true seems to solve this issue. Is this the suggested workaround?
Many thanks for fixing 'touch tap to stop' when lenis is locked in 35515a7
That would've been my next issue 😁

@clementroche
Copy link
Member

clementroche commented Mar 24, 2024

Yes @imbachb I think using syncTouch is the way to go for the moment. But I'm also wondering if scrollTo should be smooth in this case. So you could use the native scroll-behavior: smooth when lenis is not smoothed, that'd require an internal change.

@anhtuanlee
Copy link

same problem, i was add syncTouch but not work

@anhtuanlee
Copy link

i was found this problem, my problem is check on ScrollTrigger, on start, and end, use should - 10 or 20 px, it have a range from start or end and that make me belive bug in lock

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants