有没有办法在 iOS 上的 Safari 中禁用向后滑动动画? [英] Is there a a way to disable swipe back animation in Safari on iOS?

问题描述

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

I would like to disable the swipe back animation totally on a SPA. That would allow me to use some swiping gestures within the SPA. At the moment on iOS you tend to also trigger the swipe back gesture when triggering certain gestures.

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

I have found this previous post about how to disable it: 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，你就不能真正使用任何滑动手势?

The problem is that it does not deactivate the swipe back animation on iOS, it just replaces the place you get redirected to. Is there a way to also disable the swipe back animation on iOS? If there is no way to do it, does that mean you can't really use any swiping gestures if you build a PWA if you plan to have iOS customers?

推荐答案

在 iOS 13.4+ 中，您现在可以在 "touchstart" 启动事件上 preventDefault() 停止导航操作.

In iOS 13.4+ you can now preventDefault() on the "touchstart" start event to stop the navigation action.

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

Let's say we have a <div class="block-swipe-nav"> on the page that spans the entire width of the viewport and we want to prevent swipe navigation on that element.

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

我写了一篇关于阻止滑动的简短文章 一些额外的信息.

I've written a short article on blocking swipe with some additional information.

这篇关于有没有办法在 iOS 上的 Safari 中禁用向后滑动动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！