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

Question

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

我找到了关于如何禁用它的上一篇文章:iOS 7 - is there a way to disable the swipe back and forward functionality in 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" start 事件以停止导航操作。

假设我们有一个 <div class="block-swipe-nav">在跨越视口(viewport)整个宽度的页面上，我们希望防止在该元素上滑动导航。

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有一些额外的信息。