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

问题描述 投票:6回答:4

从iPad的Safari浏览器的左右边缘滑动,在当前打开的网页之间移动。有什么办法可以预防吗?

我试图在touchstarttouchmove的页面边缘添加stopPropagationpreventDefault处理程序,但它们似乎没有效果,touch-action CSS也没有。

2014年也提出了一个类似的问题,回答了负面消息:iOS 7 - is there a way to disable the swipe back and forward functionality in Safari?

2018年现在有工作吗?

javascript html ios css safari
4个回答
3
投票

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

这是我的CSS:

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

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


2
投票

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

该指南允许您禁用

  1. 滚动 function touchMove(event) { // Prevent scrolling on this element event.preventDefault(); ... }
  2. 捏合和缩放 function gestureChange(event) { // Disable browser zoom event.preventDefault(); ... }

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

  1. 如果您收到包含一个目标触摸的touchstart事件,请开始手势。
  2. 如果您在任何时间收到> 1次触摸的事件,请中止手势。
  3. 如果您主要在x方向上收到touchmove事件,请继续手势。
  4. 如果您收到主要是y方向的touchmove事件,请中止手势。
  5. 如果您收到touchend事件,请结束手势。

完整指南是海报here

如果您需要更多帮助,请告诉我。

Nitin,Defuzed


0
投票

<body>标签中试试这个:

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

我想可能会有一些副作用,不让IOS知道移动,但对于SPW,他们可能很轻微。


0
投票

你不能,这是iOS早期以来的一个问题。他们反复拖累强大的Web应用程序功能,例如服务工作者和webgl。

您可以做的最好的事情是您应该为每个浏览器做什么,为每个浏览器使用功能检测创造最佳体验。在所有浏览器上使所有网站看起来都相同的日子已经一去不复返了。

如果需要,请使用三明治,允许在支持它的浏览器上进行侧滑。为了其他用户的利益,在几个浏览器上禁用小功能并不是一件好事。

© www.soinside.com 2019 - 2024. All rights reserved.