ChatGPT解决这个技术问题 Extra ChatGPT

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

对于某些网页,我们使用 iPhone 的左右滑动功能来拉出菜单。现在在 iOS7 中,他们引入了通过左右滑动来返回和前进浏览器历史记录的上一页和下一页的功能。

但是有没有办法为特定页面禁用它,以免在滑动操作上出现冲突行为?

它应该通过在屏幕外滑动开始来区分。您是否有发生冲突的示例网页?
@RupertRawnsley 使用 console.log('FIRED!'); 将 touchstart/touchmove 事件添加到您的网页中;在里面。将手指从边缘移到网页上,您会注意到该事件永远不会触发。我假设这将是新的预期行为是否正确?
+ 1 为此。滑动打开菜单时很麻烦。
+1 用户不知道屏幕外滑动与屏幕滑动是什么。布莱尔!
作为视力不佳的用户,我需要进行很多缩放和平移,那种向后滑动的手势让我发疯。如果有人知道如何禁用它,我想知道。

V
Vinzzz

不,这是在操作系统级别完成的,网页没有得到任何回调

请参阅 this summary of safari changes in iOS7 that might cause problems to your website(包括此滑动手势)


T
Tom Clarkson

您不能直接禁用它,但只有在浏览器历史记录中有内容时才会发生本机滑动。

它并非在所有情况下都有效,但如果您在新选项卡中打开了单页 Web 应用程序,您可以使用以下方法阻止它添加到历史记录中

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

而不是 pushState 或

document.location.hash = url

是的,但这只会在导航时阻止应用程序本身的历史记录。其他应用程序也可能已经推送了历史记录,因此 iOS 也会检测到这些历史记录。
J
John Doherty

我不得不使用两种方法:

1) CSS 仅修复 Chrome/Firefox

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


我添加了这个,在 Mac 上,它确实可以防止向左滑动触发。但是,它完全破坏了后退功能(包括后退按钮),因此不能用作解决方法。
就我而言,这是我构建单页应用程序的目标
但仍有可能有人通过单击另一个网站上的链接打开您的应用程序(即,如果该网站链接到您的应用程序)。要解决此问题,您仍然需要通过 touchmove 事件检测滑动手势,并且仅在它没有紧接在滑动之前执行上述代码。这应该是可能的。
我已对此进行了更新,以包含适用于 Chrome 和 Firefox 的仅 CSS 选项
iOS 上的 @naktinis 是 Safari 引擎盖下的所有内容,因此无法在其上运行。