在iOS的Safari中，有没有一种方法可以禁用滑动返回动画？

Question

我希望能够完全禁用单页应用程序中的滑动返回动画，这将使我能够在SPA中使用一些滑动手势。目前，在iOS上触发某些手势时，您往往也会触发滑动返回手势。

我找到了关于如何禁用它的先前帖子：iOS 7 - is there a way to disable the swipe back and forward functionality in Safari? 他们建议如下：

1）仅适用于Chrome / Firefox的CSS修复

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

2) Safari的JavaScript修复

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

问题在于它不能在iOS上停用向后滑动动画，它只是替换了你被重定向到的位置。是否有方法也能够禁用iOS上的向后滑动动画？如果没有方法做到这一点，那么这是否意味着如果您打算拥有iOS客户端，构建PWA时就不能真正使用任何滑动手势？

- Dominik

---

在iOS上，Swipe-back已经内置于Safari中。该操作与返回按钮相同。因此，答案可能是在您的网站上禁用后退按钮功能或针对您想要禁用该功能的特定页面。 - daddygames

请查看我的回答：https://stackoverflow.com/a/77507209/8662097 - undefined

Answer 1

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

假设我们在页面上有一个<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();
});

我已经写了一篇关于阻止滑动的简短文章，并添加了一些额外信息。

- Rik

---

谢谢你。你有没有遇到过这个只有部分时间工作的问题？它似乎会阻止向后滑动，可能是2/3次，有时更少。我猜这里可能存在一些时间上的问题。 - Lincoln

@林肯，这可能是由于10值引起的。也许iOS将稍微大一点的X值视为导航滑动。您是否尝试将这些数字加倍以获得更好的效果？ - Alex Peters

@Rik，很棒的文章。在运行于iOS上的PWA中尤其有用，因为应用程序是全屏的，滑动导航并不一定有意义。 - Alex Peters

没有成功。最终我在iOS/Safari设备上完全禁用了浏览器历史记录（由于我的应用程序是单页面应用程序，因此这是可能的）。 - Lincoln

@Lincoln 不，它正在按预期工作。我刚刚读到另一个评论，在那里他们说全屏模式下这不起作用？ - Rik

啊啊啊。这是一个全屏PWA，所以似乎是这样的。这完全有可能是原因！我会调查一下。谢谢。 - Lincoln

Answer 2

默认情况下，无法禁用滑动返回手势。同时，在新标签页中打开URL时，点击返回按钮或向左滑动手势会将您重定向到先前的页面。

当您没有返回按钮时，有一种方法：在Safari中打开一个新标签页并转到URL，就没有URL可以返回...

我发现了一个小技巧，可以通过代码实现这个功能。当Safari找不到referrer时，返回按钮将消失，返回手势也不再起作用 :)

只需使用以下代码打开新页面即可。

<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，但是由于新页面在新标签页中加载，用户看不到它 :)

- Johnvh

Answer 3

document.body.addEventListener('click', function(evt) {
  const a = evt.target.closest('a:not([href^="#"])');
    
  if (!a) { return; }

  evt.preventDefault(); 
  history.replaceState({ }, '', a.href);
  location.reload();
});

- NSD