有没有办法在 iOS 上的 Safari 中禁用向后滑动动画？答案

【问题标题】：Is there a a way to disable swipe back animation in Safari on iOS?有没有办法在 iOS 上的 Safari 中禁用向后滑动动画？
【发布时间】：2019-08-29 15:57:26
【问题描述】：

我想在 SPA 上完全禁用向后滑动动画。这将允许我在 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？

【问题讨论】：

Swipe-back 是 iOS 上 Safari 的内置功能。该操作与“后退”按钮相同。因此，答案可能是禁用您网站上的后退按钮功能或您要禁用该功能的特定页面。

标签： javascript ios mobile mobile-safari swipe

【解决方案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();
});

我已经写信给a short article on blocking swipe，提供了一些额外的信息。

【讨论】：

谢谢。您对这部分时间的工作有任何问题吗？似乎它阻止了向后滑动 2/3 次，有时更少。我猜这里有一些时间问题。
@Lincoln，这可能是由于 10 值。也许 iOS 也将稍大的 X 值视为导航滑动。将这些数字翻倍，您是否获得了更好的成功？
@Rik，很棒的文章。在 iOS 上运行的 PWA 中尤其有用，因为应用是全屏的，滑动导航不一定有意义。
没有成功。我最终在 iOS/Safari 设备上完全禁用了浏览器历史记录（这在我的应用程序中是可能的，因为它是一个 SPA - 单页应用程序）。
@Lincoln 不，它正在按预期工作。我刚刚阅读了另一条评论，他们说这在全屏模式下不起作用？

【解决方案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，但用户看不到它，因为新页面已加载到新选项卡中:)

【讨论】：