36

We are trying to scroll an element on our iOS web app while preventing the window itself from scrolling. We are capturing the touchmove event on the window, scrolling the element programmatically and (trying to) prevent the window itself from scroll by calling preventDefault on the event.

Unfortunately this doesn't work in Mobile Safari. The window continues to scroll underneath our element. The issue sounds exactly like the Webkit bug described in https://bugs.webkit.org/show_bug.cgi?id=163207, but that issue was supposedly fixed in iOS 10.3 whereas I am running 11.3.

Catching touchforcestart and calling preventDefault does seem to prevent scrolling of the window, but we are calling it in touchstart, which seems to be "too late" since the window still scrolls. Scrolling is only prevented next time touchstart is called.

Any ideas about what is going on? We are baffled since this is clearly a bug but it seems to have been fixed some time ago.

Matthew Gertner
  • 4,487
  • 2
  • 32
  • 54

3 Answers3

84

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.
user9576791
  • 856
  • 7
  • 5
  • 5
    Great stuff, thanks! We are adding our `touchmove` listener inside the `touchstart` handler, and for some reason it seems I need to cancel that even as well (with `preventDefault`) to get the `touchmove` to cancel, even with passive turned off. With both `{ passive: false }` and the `touchstart` and `touchmove` events both canceled after we handle them, it appears to work great. – Matthew Gertner Apr 05 '18 at 20:55
  • 6
    Is it possible to enable scroll in specific div only inside the document after applying this code? @user9576791 –  Sep 05 '18 at 12:15
  • 1
    How do I remove this event listener on click from a page? @user9576791 –  Sep 05 '18 at 15:52
  • 2
    Nice, but the problem now is you're not scrolling the page either. – Ivan Ferrer Sep 13 '18 at 20:55
  • @MatthewGertner -- do you mean you add: ```document.addEventListener('touchstart', function(e) { e.preventDefault(); }, { passive: false }); document.addEventListener('touchmove', function(e) { e.preventDefault(); }, { passive: false });``` – Todd Dec 11 '18 at 19:00
  • 1
    Thank you so much. I kept seeing answers that didn't have the passive part, and so didn't work. – Kelderic Jan 29 '19 at 16:20
  • 1
    Awesome! the missing `passive: false` drove me nuts for hours! Thank you! – Teodor Sandu Nov 14 '19 at 16:34
  • how do i pass in the `{ passive: false }` option to a function delcaration? – oldboy Dec 29 '20 at 07:42
8

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.

User007
  • 771
  • 1
  • 8
  • 12
2

What worked for me was 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