iOS 7-有没有办法在Safari中禁用向后和向前滑动功能？

Question

有些网页使用了 iPhone 的向左和向右滑动功能，以拉出菜单。 现在随着 iOS7 的推出，可以通过向左或向右滑动屏幕来实现浏览器历史记录中的上一页或下一页。

但是，是否有一种方法可以针对特定的页面禁用此功能，以避免滑动操作的冲突行为？

- MeghaK

---

它应该通过从屏幕外滑动来进行区分。你有一个冲突发生的示例网页吗？ - Rupert Rawnsley

@RupertRawnsley 在您的网页上添加一个touchstart/touchmove事件，并在其中加入console.log('FIRED!');。从边缘将手指移到网页上，您会注意到该事件从未触发。我猜这将是新的预期行为，我的理解正确吗？ - Marcus

@Marcus 听起来这就是预期的行为。我想滑动事件只有在它们在浏览器窗口的某个安全边距内开始时才会起作用。从技术上讲，这是可以理解的，但用户体验会有点混乱。Vinzzz 在下面的答案中链接的文章正确指出了这不仅仅是 Safari 的问题。 - Rupert Rawnsley

iOS8中的历史手势有什么变化吗？有人尝试过它了吗？ - AlexZ

我已在Chromium上提交了一个问题：https://bugs.chromium.org/p/chromium/issues/detail?id=1033464 我知道这是一个影响不止一个浏览器的问题，而且问题是关于Safari的，但我们必须从某个地方开始。 - naktinis

你现在可以（自iOS 13.4起）：https://dev59.com/7LPma4cB1Zd3GeqPlBlC#62308482 - Rik

Answer 1

不，这是在操作系统层面完成的，网页不会得到任何回调

请参见iOS7中Safari更改概述，可能会给您的网站带来问题（包括此滑动手势）

- Vinzzz

Answer 2

你无法直接禁用它，但只有当浏览器历史记录中存在内容时，本地滑动返回才会发生。

这种方法并不适用于所有情况，但如果你在新标签页中打开了一个单页面 web 应用程序，则可以通过使用以下方法防止其添加到历史记录：

window.history.replaceState(null, null, "#" + url)

使用 pushState 的替代方案或

document.location.hash = url

- Tom Clarkson

---

是的，但这只能防止在应用程序内导航时的历史记录。其他应用程序可能也已经推送了历史记录，因此iOS也会检测到这些历史记录。 - dude

Answer 3

我需要使用两种方法： 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);
    };
}

随着时间的推移，Safari将实现overscroll-behavior-x，我们将能够删除JS hack。

- John Doherty

---

我在Mac上添加了这个功能，它确实可以防止左滑触发返回。然而，它完全破坏了返回功能（包括“返回”按钮），因此不能用作解决方法。 - Šime Vidas

在我的情况下，这是我的目标，因为我正在构建一个单页面应用程序。 - John Doherty

仍然有可能某人通过在其他网站上点击链接（例如，如果该网站链接到您的应用程序）而打开您的应用程序。要解决此问题，仍需要通过touchmove事件检测滑动手势，并仅在该手势不是紧接着立即执行时才执行上述代码。这应该是可行的。 - Šime Vidas

我已更新此内容，以包括Chrome和Firefox的仅CSS选项。 - John Doherty

你确定这在iOS上可行吗？我在iOS 13的Chrome上刚测试了 overscroll-behavior-x: none;，但它对滑动导航行为没有影响。在左边缘向右滑动会返回（即使这是选项卡历史记录中的第一页，它仍然会返回到主屏幕）。 - naktinis

@naktinis 在 iOS 上，一切都是基于 Safari 的，所以它不能在 iOS 上运行。 - hromada.dan

Answer 4

以下功能适用于iOS 16：

window.addEventListener('touchstart', e => e.preventDefault(), { passive: false })

passive标志很重要！

我发现它还会禁用悬停时的放大镜功能，可能还会影响其他Safari特定的事件。

编辑：这个监听器会导致其他onclick事件监听器无法正常工作...

- ivanjermakov

Answer 5

如果没有历史记录，则无法滑动。

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

- NSD