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

Question

我想在 SPA 上完全禁用向后滑动动画。这将允许我在 SPA 中使用一些滑动手势。目前在 iOS 上，您倾向于在触发某些手势时触发向后滑动手势。

我找到了关于如何禁用它的上一篇文章：iOS 7 - 有没有办法禁用 Safari 中的前后滑动功能？

他们建议如下：

1) CSS 仅适用于 Chrome/Firefox

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，你就不能真正使用任何滑动手势？

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

我写了一篇关于阻止滑动的短文，其中包含一些附加信息。

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