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


82

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

但是,是否有一种方法可以针对特定页面禁用它,以免在滑动操作时出现冲突行为?


应该通过在屏幕外滑动开始来区分它。您是否有示例网页发生冲突?
罗珀特·罗恩斯利

@RupertRawnsley使用console.log('FIRED!');向您的网页添加一个touchstart / touchmove事件。在里面。将手指从边缘移到网页上,您将注意到该事件永远不会触发。我以为这将是新的预期行为对吗?
Marcus

2
+1。滑动以打开菜单时比较麻烦。
TYRONEMICHAEL

2
+1用户不知道屏幕外滑动与屏幕上滑动是什么。Blergh!
Joseph Juhnke 2014年

1
作为视力不佳的用户,我需要进行大幅度平移和平移,这种向后滑动手势会使我发疯。如果有人知道如何禁用它,我想知道。
Brett Ryan

Answers:



12

您不能直接禁用它,但是仅当浏览器历史记录中包含某些内容时,才发生本机向后滑动。

并非在所有情况下都可以使用,但是如果您在新标签页中打开了一个页面的Web应用程序,则可以通过使用阻止它添加到历史记录中

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

而不是pushState或

document.location.hash = url

5
是的,但是这仅会阻止导航时应用程序本身的历史记录。其他应用程序也可能推送了历史记录,因此iOS也会检测到这些历史记录。
花花公子2015年

5

我不得不使用2种方法:

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上,它确实可以防止向左滑动滑动触发。但是,它完全破坏了后退功能(包括“后退”按钮),因此不能用作解决方法。
森那维达斯

就我而言,这就是我构建一个单页面应用程序时的目标
John Doherty

2
但是,仍然有可能有人通过单击另一个网站上的链接来打开您的应用程序(即,如果该站点链接到您的应用程序)。要解决此问题,您仍然必须通过touchmove事件检测滑动手势,并且仅在没有紧随其后的情况下才执行上述代码。应该有可能。
西米·维达斯

我更新了此内容,以包括适用于Chrome和Firefox的仅CSS选项
John Doherty

您确定这适用于iOS吗?我刚刚overscroll-behavior-x: none;在iOS 13上的Chrome上进行了测试,但对滑动导航行为没有任何影响。在左边缘向右滑动会返回(即使这是标签历史记录中的第一页,它仍会返回主屏幕)。
naktinis
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.