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

Question

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

我试图在stopPropagation和preventDefault的页面边缘添加touchstart和touchmove处理程序，但它们似乎没有效果， touch-action CSS也没有。

2014 年有人问过一个类似的问题，但回答是否定的： iOS 7 - 有没有办法在 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();
});

我写了一篇关于阻止滑动的简短文章，其中包含一些附加信息。

Answer 2

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

该指南可让您禁用

滚动

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

捏合和缩放

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

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

如果您收到包含一个目标触摸的 touchstart 事件，则开始手势。
如果您在任何时候收到超过 1 次触摸的事件，则中止手势。
如果您主要在 x 方向收到 touchmove 事件，请继续手势。
如果您主要在 y 方向收到 touchmove 事件，则中止手势。
如果您收到 touchend 事件，则结束手势。

完整指南是这里的海报。

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

尼丁，去毒化

Answer 3

你不能，这从 iOS 的早期就一直是个问题。 他们反复在强大的 Web 应用程序功能上犹豫不决，例如 service workers 和 webgl。

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

如果需要，使用三明治，在支持它的浏览器上允许横向滑动。 为了其他用户的利益，在一些浏览器上禁用一个小功能并不可耻。

Answer 4

似乎无法禁用此功能，因此作为一种解决方法，我发现页面两侧的 24 像素死区似乎足以阻止无意导航。

这是我的 CSS：

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

制作身体position: fixed还可以阻止 Safari 执行烦人的过度滚动/弹跳效果。

Answer 5

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

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

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

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

似乎浏览器供应商的使命是让 Web 开发人员的生活因诸如此类的愚蠢事情而悲惨。

Answer 6

在<body>标签中试试这个：

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

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

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

问题描述

6 个解决方案

解决方案1
10 已采纳 2020-06-10 16:24:25

解决方案2
3 2018-05-03 14:51:47

解决方案3
2 2019-03-27 00:56:12

解决方案4
1 2018-05-03 17:19:35

解决方案5
0 2019-12-13 15:41:23

解决方案6
-1 2018-09-03 18:17:44

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

问题描述

6 个解决方案

解决方案1 10 已采纳 2020-06-10 16:24:25

解决方案2 3 2018-05-03 14:51:47

解决方案3 2 2019-03-27 00:56:12

解决方案4 1 2018-05-03 17:19:35

解决方案5 0 2019-12-13 15:41:23

解决方案6 -1 2018-09-03 18:17:44

解决方案1
10 已采纳 2020-06-10 16:24:25

解决方案2
3 2018-05-03 14:51:47

解决方案3
2 2019-03-27 00:56:12

解决方案4
1 2018-05-03 17:19:35

解决方案5
0 2019-12-13 15:41:23

解决方案6
-1 2018-09-03 18:17:44