Prevent swiping between web pages in iPad Safari

Question

Swiping from the left and right edges of my iPad's Safari browser, moves between the currently open web pages. Is there any way to prevent it?

I have tried to add touchstart and touchmove handlers on the edge of the page that stopPropagation and preventDefault, but they seem to have no effect, nor does touch-action CSS.

A similar question was asked in 2014 with replies to the negative: iOS 7 - is there a way to disable the swipe back and forward functionality in Safari?

Is there a workround now in 2018?

Answer 1

In iOS 13.4+ you can now preventDefault on "touchstart"

Let's say we have a <div class="block-swipe-nav"> on the page that spans the entire width of the viewport and we want to prevent swipe navigation on that element.

const element = document.querySelector('.block-swipe-nav');

element.addEventListener('touchstart', (e) => {

    // is not near edge of view, exit
    if (e.pageX > 10 && e.pageX < window.innerWidth - 10) return;

    // prevent swipe to navigate gesture
    e.preventDefault();
});

I've written a short article on blocking swipe with some additional information.

Answer 2

Apple provided these guidelines after iOS9.

The guide lets you disable

1. Scrolling

   function touchMove(event) {
     // Prevent scrolling on this element
     event.preventDefault();
     ...
   }
   

2. Pinch and Zoom

   function gestureChange(event) {
     // Disable browser zoom
     event.preventDefault();
     ...
   }
   

You can identify a swipe gesture as follows:

1. Begin gesture if you receive a touchstart event containing one target touch.
2. Abort gesture if, at any time, you receive an event with >1 touches.
3. Continue gesture if you receive a touchmove event mostly in the x-direction.
4. Abort gesture if you receive a touchmove event mostly the y-direction.
5. End gesture if you receive a touchend event.

The full guide is poster here.

Let me know if you need more help.

Nitin, Defuzed