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

mzsu5hc0  于 2023-02-01  发布在  iOS
关注(0)|答案(3)|浏览(252)

我想完全禁用SPA上的向后滑动动画。这样我就可以在SPA中使用一些滑动手势。目前在iOS上,当触发某些手势时,你往往也会触发向后滑动手势。
我发现这个以前的帖子关于如何禁用它:iOS 7 - is there a way to disable the swipe back and forward functionality in 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,你就不能真正使用任何滑动手势?

uqxowvwt

uqxowvwt1#

在iOS 13.4+中,您现在可以在"touchstart"启动事件上使用preventDefault()来停止导航操作。
假设我们在页面上有一个<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();
});

我已经编写了a short article on blocking swipe,其中包含一些附加信息。

zpqajqem

zpqajqem2#

默认情况下,无法禁用向后滑动手势。同样,当您在新标签页中打开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和,但用户看不到它,因为新页面加载在新选项卡中:)

ncgqoxb0

ncgqoxb03#

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

相关问题