Question

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

我已尝试使用window.onbeforeunload但如果我在网址中有哈希值似乎不起作用（后退将在www.example.com/work/#step1#unsaved www.example.com之间发生变化/ work /＃step0）并且事件似乎没有触发。

我正要切换到另一种解决方案，但今天我注意到在Google Docs中它完全禁用了。他们是如何实现这一目标的？

Answer 1

默认情况下，在新标签/窗口中打开特定页面（通过在超链接中放置target =“_ blank”＆gt;）。这样就没有以前的页面可以回到。

或者默认情况下阻止水平滚动。为此，您可以使用jquery.mousewheel执行：

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

Answer 2

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

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

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

Answer 3

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

引导我到这里的问题被标记为＆＃34;重复＆＃34;并且接近答案。我相信这个答案更适合＆＃34;重复的＆＃34;但问题是，我觉得这个答案可能会为有人登陆这两个问题节省时间。

更好的问题： Disable navigation swipe on Chrome browser in javascript

这篇谷歌开发者文章帮助我允许e.preventDefault（）工作并阻止Chrome 61中的滑动手势。

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

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

Detect a finger swipe through JavaScript on the iPhone and Android

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

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 4

在@roy riojas和@redgetan给出的先前答案的基础上 - 我将他们的答案结合起来，以允许这是动态的并且防止向前和向后 - 再次 - 根据@ roy的评论 - 你必须知道你的课程element，对于此实现 - 实际滚动的嵌套元素的类

(function ($) {
  $(document).on('mousewheel', function(e) { 
    var $target = $(e.target).closest('.scrollable-h');
    var scroll = $target.scrollLeft();
    var maxScroll = $target.find('.scrollable-h-content').width() - $target.width();

    if(scroll <= 0) {
      if(scroll <= 0 && e.originalEvent.wheelDeltaX >= 0) {
        e.preventDefault();
      }
    }
    if(scroll >= maxScroll) {
      if (scroll >1 && e.originalEvent.wheelDeltaX <= 0) {
        e.preventDefault();
      }
    }
});}(jQuery));

Answer 5

Disable Chrome two fingers back/forward swipe

这对我有用：

body {
  overscroll-behavior-x: none;
}

Answer 6

嗨，这对我在chrome上工作但不适用于整个页面，但适用于我有可滚动内容的地方。

在Google文档（Spreadsheets）中，它似乎正在运行，因为它们没有可用的后台页面。如果您导航到另一个URL（手动），它将不会阻止您导航回来。

$(document).on('mousewheel', function(e) { 
  var $target = $(e.target).closest('.scrollable-h');
  if ($target.scrollLeft () <= 4) {
    $target.scrollLeft(5);
    return false;
  }
});

要记住的一件事是上面的代码做了两个假设：

具有水平可滚动内容的元素具有类 scrollable-h
如果检查scrollLeft是否大于4px然后只是让它滚动到5px 返回false有效取消后退手势

重要的： - 这只能防止后滑动手势，当快速完成时，如果你做得很慢，它有时会触发。

这也不会阻止向前滑动手势，但也可以通过检查元素是否已达到最大scrollLeft来完成。如果是这种情况，那么将它移回20px并返回false以防止事件发生......如果你觉得这个用例有意义，你可以自行添加。

您可以在这里查看概念证明。 http://jsfiddle.net/royriojas/JVA6m/#base

Answer 7

我可以通过在地址栏中键入chrome：// flags并向下前往“Overscroll history navigation”并从下拉列表中将其设置为“Disabled”来禁用它。

Answer 8

我一直在做类似的事情，我想覆盖前进/后退历史记录的滑动手势。根据您的滑动区域，可以如下调整选择器：

html { touch-action:none; }

这是相关的文档，为您提供所有触摸操作的所有属性，例如浏览器中内置的平移或缩放功能。

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

Answer 9

您可以使用以下代码禁用后退/前进：

document.addEventListener("wheel", function(event) {
    event.preventDefault();
}, { passive: false });

请注意，至少在Chrome中，添加{passive：false}是必不可少的。如果您只想在某些区域禁用后退/前进，则可以使用如下代码（假设您使用的是jquery，并且将class disable-back-forward添加到要禁用后退/前进的部分中）：

document.addEventListener("wheel", function(event) {
    if ($(event.target).closest('.disable-back-forward').length)
        event.preventDefault();
}, { passive: false });

Answer 10

你在错误的水平上看问题。简单地不触发OnBeforeUnload，因为从浏览器的角度来看没有任何东西被卸载。因此，您非常坦率地实现了错误的版本控制机制 - 片段用于页面状态，而不是现在使用它的文档状态。

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

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

10 个答案: