Can't prevent `touchmove` from scrolling window on iOS
I recently ran into this same problem. You'll need to pass { passive: false }
when registering the touchmove
event listener. e.g.
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, { passive: false });
This is because document touch event listeners are now passive by default in Safari 11.1, which is bundled with iOS 11.3. This change is documented in the Safari 11.1 release notes:
Web APIs
- [...]
- Updated root document touch event listeners to use passive mode improving scrolling performance and reducing crashes.
You need to bind preventDefault
to two events: touchmove
and touchforcechange
to make it work in ios 11, e.g.
document.addEventListener('touchmove', this.preventDefault, {passive: false});
document.addEventListener('touchforcechange', this.preventDefault, {passive: false});
And you should bind them before touchstart
If you bind them inside your touchstart
or dragStart
handler, they can only prevent scroll in the next dragging.