滑动(后退和前进)时禁用网页导航

Question

在Windows手机上,如果滑动来自边缘,则IE用户可以通过在屏幕上滑动来前后移动.此操作系统级功能阻碍了我的网页用户体验.

是否有任何js或css可以禁用它？一些黑客也会这样做.

来自windowsphone网站的快照:

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

请注意,我仍然需要启用水平滚动的触摸功能.

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 中的前后滑动功能？

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

Answer 3

如何阻止滑动事件的默认操作。在 document.ready 的某处添加（注意我在本例中包含了 document.ready，只需要添加该函数）：

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

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