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

在Windows手机上，如果滑动来自边缘，用户可以通过在屏幕上滑动来前后移动。 这个操作系统级别的function阻碍了我的网页的用户体验。

有没有可以禁用的JS或CSS？ 有些黑客也会这样做。

来自windowsphone网站的快照：

以下是参考页面的链接： http : //www.windowsphone.com/en-in/how-to/wp8/basics/gestures-swipe-pan-and-stretch

请注意，我仍然需要触摸水平滚动。

Answer 1

复制并粘贴这个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;}}});

Answer 2

如何防止滑动事件的默认操作。 在你的document.ready添加的地方（注意在这个例子中包含了document.ready，只需要添加这个函数）：

$(document).ready(function(){ $(window).on('touchmove',function(e){e.preventDefault();}); });

在这种情况下，我相信这个事件被称为“touchmove”，你可能需要扩展这个也忽略touchstart / touchend的默认行为，但我不是100％确定。

Answer 3

对于已configuration向左滑动以向后导航的Mac用户，这也是一个问题。 您不能禁用此设置，但可以提示用户确认他们打算离开https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload 。

Answer 4

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

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

Answer 5

这应该防止滑动导航

 @media screen and (-ms-high-contrast: none) { html { overflow-x: scroll; -ms-touch-action: none; -ms-overflow-style: none; -ms-scroll-chaining: none; } }