2

On Safari 10, by defining a simple listener that prevents default a touchmove event within a scrollable element, the event is not default prevented as it does with Safari 9 and less (it also does in all major browsers).

This is reproducible here: http://codepen.io/anon/pen/PGRxOv

Steps to Reproduce:

  • Take an element with scrollable content (overflow: scroll).
  • Add an event listener on it for touchmouve event, and call event.preventDefault() in that event listener.

Expected Results:

The element should not be scrollable.

Actual Results:

The element is still scrollable on Safari 10.

Version: iOS 10.0.2

Probably a webkit issue...I opened an issue on webkit bug tracker.

In the mean time, if anyone has a workaround (except prevent the touchstart), it would be great :)

I also tried to return false in the listener but it does not work either.

VPusher
  • 376
  • 1
  • 4
  • 11

2 Answers2

0

You need to pass the {passive:false} option to addEventListener (explanation), and you also need to make sure you execute e.preventDefault() on touchmove and touchstart:

window.addEventListener("touchstart", e=>e.preventDefault(), {passive:false});
window.addEventListener("touchmove", e=>e.preventDefault(), {passive:false});
joe
  • 3,752
  • 1
  • 32
  • 41
-1

Thanks for writing about this and raising an issue — it had me completely baffled!

Your codepen solution didn't seem to work for me, but I have since found another solution here: https://github.com/metafizzy/flickity/issues/457

This is their solution:

window.addEventListener( 'touchmove', function() {})

Feels very hacky but has worked for my situation.

I hope this helps anyone else frustrated by this.

Chris
  • 7
  • 1
  • 2