Skip to content

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

Open
@imbachb

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions