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

Question

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

我找到了上一篇关于如何禁用它的帖子：iOS 7 - 有没有办法在 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，你就不能真正使用任何滑动手势？

Answer 1

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

假设我们在页面上有一个跨越视口整个宽度的<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 没有 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);
}

您需要更改原始网址，但用户看不到它，因为新页面加载到新标签页中:)

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