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

[imbachb]

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.

[imbachb]

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 😁

[clementroche]

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]

same problem, i was add syncTouch but not work