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

Posted

技术标签:

【中文标题】滑动时禁用网页导航(后退和前进)【英文标题】:Disable web page navigation on swipe(back and forward) 【发布时间】:2015-08-18 15:45:51 【问题描述】:

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

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

来自 windowsphone 网站的快照:

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

请注意,我仍然需要为水平滚动启用 touchaction。

【问题讨论】:

你试过摆弄-ms-scroll-chaining: none; CSS 参数吗? 这是您要找的吗? ***.com/a/13709150/1540570 是否正确,没有正确答案? 【参考方案1】:

您应该以两种方式尝试此解决方案:

1) 仅适用于 Chrome/Firefox 的 CSS 修复

 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 - is there a way to disable the swipe back and forward functionality in Safari? 可能重复

【讨论】:

【参考方案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;elseif(Math.abs(oldX-xPos)>Math.abs(oldY-yPos))event.preventDefault();return false;);

【讨论】:

也禁用滚动 这会衡量您是否在水平方向上滑动多于垂直方向,因此除非您滚动歪斜,否则它不应禁用滚动! “复制并粘贴”对于代码 sn-p 来说不是一个好的注释。对它正在做什么的某种描述会更好。【参考方案3】:

如何防止滑动事件的默认操作。在你的 document.ready 添加(注意我在这个例子中包含了 document.ready,只需要添加函数):

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

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

【讨论】:

不过,这也会禁用滚动。 您可以存储最后一次触摸位置并确定偏移量是更垂直还是更水平,例如您有点 (1,1);如果下一个触摸移动是 (3,2),您会知道用户在水平方向上的移动比在垂直方向上移动的多,在这种情况下,您将调用 preventDefault(),否则允许它。这是一个类似的post【参考方案4】:

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

【讨论】:

【参考方案5】:

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

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

【讨论】:

【参考方案6】:
*
    -webkit-touch-callout: none;

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

【讨论】:

这仅在 safari 上可用,并且只会阻止标注显示而不是阻止触摸手势 - 标注是一个弹出窗口,当您触摸并按住它时会提供有关链接的信息。

以上是关于滑动时禁用网页导航(后退和前进)的主要内容,如果未能解决你的问题,请参考以下文章

在 iOS 7 中更改后退按钮会禁用滑动导航

禁用单个 ViewController 的后退导航

尝试在 VueJs 中禁用导航按钮时出错

如何检测由滑动触发的后退导航并在iOS上将其停止?

求HTML网页点击UE浏览器上的后退按钮后能回到上一次浏览的网页的代码!

为啥 Angular 组件未在浏览器后退/前进导航上加载?