CODEWITHSUNDEEP
webscrollmobile-safaritouch-eventtouchstart
Oscar Galo
Oscar Galo

Reputation: 358

touchstart event does not trigger on scrollable div if already scrolling (on iPhone)

I have met this problem when scrolling on my iPhone 6 device (tested on Safari and Chrome):

Given a scrollable div, if i touch the div when it's already on inertial scrolling motion, the scrolling motion stops as expected but the touchstart event does not trigger at all.

When tested on Xiaomi Android device (tested on Chrome) the scroll stops AND the touchstart event is fired.

Why is touchstart not triggered?. Is it a standard behaviour on iPhone?.

I have set up a fiddle to test this behaviour:

https://fiddle.jshell.net/galoxia/L63wj9or/

Just make the gesture to "activate" inertial scrolling on the blue box and then touch again to stop it. On Android you will see touchstart in the yellow box. On iPhone you will not.

Upvotes: 13

Views: 2140

Answers (1)

Adrian Holovaty
Adrian Holovaty

Reputation: 2419

I'm running into this same problem while trying to implement a double-tap handler for touch devices in JavaScript. If a momentum scroll is happening in iOS Safari, then touchstart events aren't sent for approximately 500 ms after the initial touchstart (the touchstart that initiated the scroll).

If you put a preventDefault() in the touchstart handler, then this solves the issue (but disables scrolling). That might be an acceptable solution depending on your use case. As I see it, the two possible options are:

  1. Disable "native scrolling via touch" and receive all touchstart events (use preventDefault() in the touchstart handler)
  2. Enable "native scrolling via touch" but do not receive touchstart events for approximately 500 ms after the initial touchstart in a scroll

I'd love to be proven wrong on this. If there's a way to consistently get touchstart events without calling preventDefault() in the touchstart handler and without breaking native scroll, please post a comment here.

Upvotes: 0

Related Questions