Is There A A Way To Disable Swipe Back Animation In Safari On Ios?

I would like to disable the swipe back animation totally on a SPA. That would allow me to use some swiping gestures within the SPA. At the moment on iOS you tend to also trigger th

Solution 1:

In iOS 13.4+ you can now preventDefault() on the "touchstart" start event to stop the navigation action.

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, exitif (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.

Solution 2:

By default, there is no way to disable the swipe-back gesture. Also when you open the URL in a new tab, the back-button and swipe-left gesture will redirect you to the previous page.

There is one way when you haven't a back button: When you open a new tab in Safari and go to the URL there's is no URL to go back...

I found a small hack to make this possible in code. When Safari doesn't find the referrer anymore, the back button will disappear and the back-gesture doesn't work anymore :)

Opening the new page in a new tab is the only thing you have to do with something like the following code behind:

<ahref="https://yoururl.com/path"target="_blank"onclick="handleClick()">Click here to open</a>

functionhandleClick() {
  setTimeout(function () {
    window.location.href = '?changeThePath';
  }, 100);
}

You need to change the original URL and, but the user doesn't see it because the new page is loaded in a new tab :)