Question

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 the swipe back gesture when triggering certain gestures.

I have found this previous post about how to disable it: iOS 7 - is there a way to disable the swipe back and forward functionality in Safari?

They suggest following:

1) CSS only fix for Chrome/Firefox

html, body {
    overscroll-behavior-x: none;
}

2) JavaScript fix for Safari

if (window.safari) {
    history.pushState(null, null, location.href);
    window.onpopstate = function(event) {
        history.go(1);
    };
}

The problem is that it does not deactivate the swipe back animation on iOS, it just replaces the place you get redirected to. Is there a way to also disable the swipe back animation on iOS? If there is no way to do it, does that mean you can't really use any swiping gestures if you build a PWA if you plan to have iOS customers?

Answer 1

在iOS 13.4+中，您现在可以在preventDefault()开始事件上"touchstart"停止导航操作。

假设我们在页面上有一个<div class="block-swipe-nav">，它横跨视口的整个宽度，并且我们希望避免在该元素上滑动浏览。

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();
});

我写了a short article on blocking swipe并附带了一些其他信息。

Answer 2

默认情况下，无法禁用向后滑动手势。同样，当您在新标签页中打开URL时，后退按钮和向左滑动手势会将您重定向到上一页。

没有后退按钮的一种方法是：在Safari中打开新标签页并转到URL时，没有URL可以返回...

我发现了一个小技巧，可以在代码中做到这一点。当Safari找不到引荐来源网址时，“后退”按钮将消失，并且后退手势也不再起作用：）

在新标签页中打开新页面是您唯一要做的事情，类似于下面的代码：

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

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

您需要更改原始URL，但由于新页面已加载到新标签中，因此用户看不到它：）

Is there a a way to disable swipe back animation in Safari on iOS?

2 个答案: