Question

从iPad的Safari浏览器的左右边缘轻扫，在当前打开的网页之间移动。有什么办法可以阻止吗？

我尝试在touchstart和touchmove的页面边缘添加stopPropagation和preventDefault个处理程序，但它们似乎没有任何效果，{ {1}} CSS。

2014年有人回答了一个类似的问题： iOS 7 - is there a way to disable the swipe back and forward functionality in Safari?

2018年现在有工作吗？

Answer 1

在iOS 13.4+中，您现在可以在preventDefault上"touchstart"

假设我们在页面上有一个<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并附带了一些其他信息。

Answer 2

Apple在iOS9之后提供了这些指南。

该指南可让您停用

滚动

function touchMove(event) {
  // Prevent scrolling on this element
  event.preventDefault();
  ...
}

捏合和缩放

function gestureChange(event) {
  // Disable browser zoom
  event.preventDefault();
  ...
}

您可以按如下方式识别滑动手势：

如果您收到包含一个的touchstart事件，请开始手势目标触摸。
如果您在任何时间收到活动，请中止手势＆gt; 1次触摸。
如果您收到touchmove事件，请继续手势大多数在x方向。
如果您收到touchmove，请中止手势事件主要是y方向。
如果收到touchend，请结束手势事件

完整指南是海报here。

如果您需要更多帮助，请与我联系。

尼丁， Defuzed

Answer 3

似乎没有办法禁用此功能，所以作为一个workround我发现页面两侧的24px死区似乎足以阻止无意的导航。

这是我的CSS：

body {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 24px;
  right: 24px;
  background-color: #ccc;
}

使身体position: fixed也阻止Safari进行恼人的过度滚动/反弹效果。

Answer 4

在<body>标签中尝试：

onload='ontouchmove()="return(function(event) { event.preventDefault(); event.stopPropagation(); return(false); } );"'

我想象不让IOS知道移动可能会产生一些副作用，但对于SPW，它们可能很小。

Answer 5

您不能，自iOS成立以来，这一直是一个问题。他们反复踩踏强大的Web应用功能，例如服务人员和webgl。

您能做的最好的事情就是对每个浏览器都应该做的事情，并为每个浏览器使用功能检测获得最佳的体验。使所有网站在每个浏览器上看起来都一样的日子已经一去不复返了。

如有必要，请使用三明治，并在支持它的浏览器上进行侧滑。为了让其他用户受益，禁用一些浏览器中的小功能并没有什么可耻的。

Answer 6

如果有导航历史记录，则可以对滑动手势进行导航。向左滑动是“返回到我的导航历史记录中的上一页”。

因此，如果您的应用不需要导航历史记录（例如对于单个屏幕游戏可能完全有效），那么您可以通过删除导航历史记录来防止刷卡问题。 >

例如，我有一个仅使用内存历史记录的单页应用程序，我不与浏览器同步（历史记录/ URL）。因此，“刷卡”无处可寻并“解决”此问题。

也就是说，这是一种变通方法，其局限性可能不足以满足您的情况。（URL共享是Internet的基本功能）

浏览器供应商的使命似乎是使诸如此类的愚蠢事情使Web开发人员的生活痛苦不堪。

防止在iPad Safari中的网页之间滑动

6 个答案: