Can't Prevent 'Touchmove' from Scrolling Window on iOS

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.

IOS Prevent touchmove event being catched by the body behind fixed element

There really is not a good solution for dealing with a fixed element that has scrolling inside of it on mobile browsers.

I have not tested other browsers besides Safari but I've learned that other browsers are not too fond of this combination either.

The best and most flexible solution is to make your full screen elements absolute positioned. This will fix common issues with swiping and positioning.

But what if my element is in a relative container?

Then you are out of luck and need to grab your element, remove it from the dom and place it up as high in the dom as you can when you are opening your fullscreen element.

Afterwards you need to place your element back in it's original position. They best way I know of to do this, is to leave behind a placeholder for you to append/prepend to. The dom has no method your giving you the exact location of an element therefore if you don't want the order of elements to change you are forced to do this.

Feel free to leave comments or suggestions on this answer if you feel like improvements can be made.

How to disable scrolling on body in iOS 13 safari (when saved as PWA to the homescreen)?

I combined try 2 and try 4 from the question. The fixed body shows no overflow scrolling and the scroll reset prevents the long animation of the overflow scrolling in the background. It's really ugly but it kinda works.

body {
  position: fixed;
}

window.addEventListener("scroll", (e) => {
  e.preventDefault();
  window.scrollTo(0, 0);
});

iOS Disable Page Scrolling with overflow-scrolling: touch

Try swapping around the logic in your window and scrollable element listeners like so:

// window or document
window.addEventListener("touchmove", function(event) {
  if (!event.target.classList.contains('scrollable')) {
    // no more scrolling
    event.preventDefault();
  }
}, false);

// No special listeners needed on .scrollable elements

This way, you only prevent default when trying to scroll non-scrollable elements.

You will still have a problem that at the top/bottom of the scrollable content starting a drag can cause the whole app to "bounce". To fix this problem, see Joe Lambert's ScrollFix.

---

Related Topics