停止镀铬后退/前进两个手指滑动

Question

我想禁用导致Chrome返回或前进的两个手指滑动.我有一个网站,如果他没有专门保存,用户可能会失去工作进度.

我尝试过使用,window.onbeforeunload但如果我在网址中有哈希值,那么这似乎不起作用(后退将在www.example.com/work/#step1#unsaved www.example.com/work/#step0之间发生变化)事件似乎没有触发.

我正要切换到另一种解决方案,但今天我注意到在Google Docs中它完全禁用了.他们是怎么做到的？

Answer 1

默认情况下,在新选项卡/窗口中打开特定页面(通过在超链接中放置target ="_ blank">).这样就没有以前的页面可以回去了.

或者默认情况下防止水平滚动.为此,您可以使用jquery.mousewheel执行:

$(document).on("mousewheel",function(event,delta){ 
  // prevent horizontal scrolling
  if (event.originalEvent.wheelDeltaX !== 0) {
    event.preventDefault();
  } 
});

Answer 2

禁用Chrome两指向后/向前滑动

这为我工作：

body {
  overscroll-behavior-x: none;
}

Answer 3

假设您有一个水平滚动元素，添加overscroll-behavior-x: contain;是防止滚动操作溢出到页面并导致导航的最简单方法。

https://dev.to/danburzo/css-micro-tip-prevent-history-navigation-on-horizo​​ntally-scrolling-elements-3iil

https://caniuse.com/#feat=css-overscroll-behavior

Answer 4

禁用或替换Google Chrome 61的滑动手势

导致我在这里出现的问题被标记为“重复”，并且无法回答。我认为此答案更适合“重复”的问题，但是，我认为此答案可能会为落在这两个问题上的人节省时间。

更好的问题： 在JavaScript中的Chrome浏览器上禁用导航滑动

谷歌开发人员的这篇文章帮助我允许e.preventDefault（）正常工作，并防止Chrome 61以后的滑动手势。

https://developers.google.com/web/updates/2017/01/scrolling-intervention

givanse对以下问题的回答是我用来编写自己的滑动事件处理程序的代码：

通过iPhone和Android上的JavaScript检测手指滑动

总之，以下两个事件用于实现划动手势：

handleTouchStart (e) {
  ...
},
handleTouchMove (e) {
  ...
  e.preventDefault()
}

从Chrome 56开始，默认行为是使事件监听器变为被动状态，从而禁用阻止Chrome滑动手势的功能。要覆盖此行为，可以按如下方式添加事件侦听器：

document.addEventListener(
  'touchstart',
  this.handleTouchStart,
  {passive: false}
)
document.addEventListener(
  'touchmove',
  this.handleTouchMove,
  {passive: false}
)

通过将{passive：false}对象作为第三个参数传递给addEventListener方法，该侦听器将注册为活动状态，并可以使用e.preventDefault（）事件方法停止Chrome的默认行为。

Answer 5

你在错误的层面上看待问题。OnBeforeUnload 根本不会被触发，因为从浏览器的角度来看没有卸载任何内容。因此，坦率地说，您实现了错误的版本控制机制 - 片段用于页面状态，而不是您现在使用的文档状态。

如果您坚持通过哈希片段维护状态，则需要使用另一种机制来防止页面状态更改。由于当前所有浏览器都支持 LocalStorage 我会使用它。好吧，同时，将所有文档状态数据放在那里，而不是放在 URL 中，因为 Google Docs 就是这样做的，这就是为什么他们没有这个问题。