lenis
lenis copied to clipboard
darkroomengineering
scrollTo with `lock: true` does not stop ongoing touch move scrolling on mobile
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
scrollTowithlock: 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
scrollToanimation 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.
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 https://github.com/darkroomengineering/lenis/commit/35515a7e4318f101be31ad5a13d2eff04a12861d
That would've been my next issue 😁
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.
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