禁用网页在滑动时的导航（后退和前进）功能

Question

在Windows手机中，如果从边缘滑动屏幕，用户可以在IE中向前或向后导航。这个操作系统级别的功能影响了我的网页用户体验。

是否有任何js或css可以禁用它？一些hack也可以。

Windowsphone网站的快照： 这是参考页面的链接: http://www.windowsphone.com/en-in/how-to/wp8/basics/gestures-swipe-pan-and-stretch 请注意，我仍然需要启用touchaction以进行水平滚动。

- Shekhar Joshi

---

你尝试过调整-ms-scroll-chaining: none; CSS参数吗？ - SzybkiSasza

这是您要找的吗？https://dev59.com/IGYr5IYBdhLWcg3wdqCv#13709150 - Carol McKay

有没有正确答案是正确的？ - drunkcamel

Answer 1

您可以尝试以下两种解决方案：

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。

可能是重复的问题：iOS 7-有没有办法在Safari中禁用向后和向前滑动功能？

- Mayur Kukadiya

---

在Firefox/Chrome中运行得很好，谢谢！ 我无法在现代Safari中使CSS（MDN表示已支持）或JS工作。可能是我太傻了... - Adam Shand

Answer 2

复制并粘贴以下 JavaScript 代码：

var xPos = null;
var yPos = null;
window.addEventListener( "touchmove", function ( event ) {
    var touch = event.originalEvent.touches[ 0 ];
    oldX = xPos;
    oldY = yPos;
    xPos = touch.pageX;
    yPos = touch.pageY;
    if ( oldX == null && oldY == null ) {
        return false;
    }
    else {
        if ( Math.abs( oldX-xPos ) > Math.abs( oldY-yPos ) ) {
            event.preventDefault();
            return false;
        }
    }
} );

如果您想要压缩它，请复制并粘贴以下内容：

var xPos=null;var yPos=null;window.addEventListener("touchmove",function(event){var touch=event.originalEvent.touches[0];oldX=xPos;oldY=yPos;xPos=touch.pageX;yPos=touch.pageY;if(oldX==null && oldY==null){return false;}else{if(Math.abs(oldX-xPos)>Math.abs(oldY-yPos)){event.preventDefault();return false;}}});

请注意，此段代码涉及IT技术。

- clickbait

---

禁用滚动。 - Shekhar Joshi

这个测量方法可以判断你是在水平方向上滑动还是垂直方向上滑动，因此它不应该禁用滚动除非你滚动得很歪！ - clickbait

“复制并粘贴此代码”不是一个好的代码片段注释方式。更好的做法是提供一些描述性的内容来解释它的作用。 - biagidp

这很糟糕，但“复制并粘贴此压缩代码”更糟糕。 - Glenn Maynard

Answer 3

检查 David Hill 的 Codepen，请访问 this Codepen。

var elem = document.getElementById("container"); //area we don't want touch drag

var defaultPrevent=function(e){e.preventDefault();}
elem.addEventListener("touchstart", defaultPrevent);
elem.addEventListener("touchmove" , defaultPrevent);

我实际上认为这也是一种很酷的构建对象的方式。

- Jordan Nakamoto

Answer 4

在文档准备好后，如何防止滑动事件的默认操作。请在其中添加以下代码（请注意，我在此示例中包含了文档准备就绪，只需添加函数即可）： $(document).ready(function(){ $(window).on('touchmove',function(e){e.preventDefault();}); });

在这种情况下，我认为事件被称为“touchmove”，您可能还需要扩展它以忽略touchstart/touchend的默认行为，但我不确定。

- clovola

---

那也会禁用滚动。 - Okku

你可以存储最后的触摸位置，然后确定偏移量是更垂直还是更水平的。比如说，如果你有一个点(1, 1)，下一次触摸移动到了(3, 2)，你就知道用户在水平方向上移动得更多，而不是垂直方向上。在这种情况下，你将调用preventDefault()，否则就允许它。这里有一个类似的帖子：（https://dev59.com/TmYr5IYBdhLWcg3w7udx） - clovola

Answer 5

这也是Mac用户的一个问题，他们已经配置了向左滑动以后退。您无法禁用此设置，但可以提示用户确认他们打算导航到其他页面 https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload。

- tommyTheHitMan

Answer 6

*{
    -webkit-touch-callout: none;
}

结果是完全禁用任何触摸事件

- Hemanth chalamalasetti

---

这仅在Safari上可用，而且仅防止呼出菜单显示而不是防止触摸手势 - 呼出菜单是一个弹出窗口，当您触摸并长按链接时提供有关链接的信息。 - Hugheth