禁用滑动时的网页导航（向后和向前）

Question

在 Windows 手机上，如果滑动来自边缘，则在 IE 中，用户可以通过在屏幕上滑动来后退和前进。这种操作系统级别的功能阻碍了我网页的用户体验。

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

来自windowsphone网站的快照：

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

请注意，我仍然需要启用触摸操作才能水平滚动。

Answer 1

对于所有现代浏览器：

 html, body {
    overscroll-behavior-x: none;
}

对于旧版 Safari 版本（早于 2022 年 9 月 12 日发布的 v16），请使用以下命令：

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

查看 David Hill 的 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);

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

Answer 4

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

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

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

Answer 5

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

Answer 6

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

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