有没有一种方法可以在iOS的Safari中禁用向后滑动动画?

问题描述

我想完全禁用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.

我找到了有关如何禁用它的上一篇文章:

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中禁用向后滑动动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！