logo标签列表

停用Chrome浏览器的两指滑动返回/前进功能

javascriptgoogle-chromeswipe
46

我想禁用双指划动，在Chrome中导致返回或前进。

我有一个网站，用户如果没有特别保存，可能会丢失他的工作进度。

我尝试使用window.onbeforeunload，但如果我在URL中使用哈希标记（向后和向前将在 www.example.com/work/#step1#unsaved www.example.com/work/#step0 之间切换），则似乎无效，并且事件似乎不会触发。

我本来打算转到另一个解决方案，但今天我注意到在Google文档中完全被禁用了。他们是如何实现的？

窗口的 onbeforeunload 需要同步任务。也许这就是那种方法出现问题的原因。 - jan salawa
你可以使用 onhashchange 事件来检测滑动尝试更改哈希值吗？ - Barmar
11个回答
104
11
如果这个方法对你不起作用，尝试在html元素上指定overscroll-behavior-x。 - Matt Sanders
谢谢@Matt Sanders，这太棒了，有时候用水平滚动触发这个手势非常容易。 - Alex Sorokoletov
1
有点偏题，但值得注意的是，这也适用于其他元素。如果您想将两个手指滑动整个页面保留下来，但想要禁用具有水平滚动的特定部分，则尤其有用。 - Senne
1
救了我的一天！我一直在寻找JavaScript解决方案，检测左右滑动并防止默认行为，但这很容易... - Shurvir Mori
1
如果你只想在某些元素中使用，比如 <canvas>，你可以使用 addEventListener('mouseenter'/'mouseleave' 并在 <html> 上附加/删除类。 - Noble Dinasaur
在Chrome上起作用 - Ivan Hanák
10

通过在超链接中加入target="_blank">，使特定页面默认在新标签页或窗口中打开。这样就不会有之前的页面可以返回。

或者默认情况下禁止水平滚动。为了做到这一点，你可以使用jquery.mousewheel进行操作：

$(document).on("mousewheel",function(event,delta){ 
  // prevent horizontal scrolling
  if (event.originalEvent.wheelDeltaX !== 0) {
    event.preventDefault();
  } 
});
最好使用“event.stopPropagation（）”。 - sheerun
2
@sheerun 不是这样的。stopPropagation 会阻止事件冒泡，可能会导致第三方代码中期望触发这些事件而出现意外行为和错误。始终优先使用 preventDefault。 此外，在Chrome 59.0.3071.115中，preventDefault似乎无法再针对此情况起作用（stopPropagation亦然）。是否有人有解决方法？ - Jesse
是的，我也在Chrome 60上遇到了这个问题。 - Dogoku
10
这似乎不能防止在 Windows 上使用 Chrome 横向滚动时发生后退导航。编辑：显然，当属性在 html 标签上而不是可滚动容器上时，它可以工作。 - Matej Kormuth
8

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

导致我来到这里的问题被标记为“重复”并关闭了答案。我认为这个答案更适合“重复”的问题，但我觉得这个答案可能会为着陆在任何一个问题上的人节省时间。

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

这篇Google开发者文章帮助我允许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的默认行为。
2

我一直在做类似的工作，想要覆盖前进/后退历史滑动手势。根据您的滑动区域，您可以按照以下方式调整选择器：

html { touch-action:none; }

这是相关文档，提供了所有与浏览器内置的平移或缩放功能相关的触摸操作属性。 https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
在Chrome浏览器中没有帮助到我。 - scythargon
2

在之前@roy riojas和@redgetan提供的答案基础上，我将他们的答案结合起来，使其具有动态性并且可以防止前后滚动。根据@roy的评论，你必须知道元素的类，对于这个实现来说，是实际被滚动的嵌套元素的类。

(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));
1
您可以使用此代码禁用浏览器的后退/前进功能：

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

注意，在Chrome中添加{ passive: false }是必要的。如果你只想在某些区域禁用后退/前进，可以使用以下代码（假设你正在使用jquery并将类disable-back-forward添加到你想要禁用后退/前进的部分）：
document.addEventListener("wheel", function(event) {
    if ($(event.target).closest('.disable-back-forward').length)
        event.preventDefault();
}, { passive: false });
0

嗨，这对我在Chrome上有用，但并非整个页面，而是适用于我具有可滚动内容的地方。

在Google文档（电子表格）中，它似乎有效，因为它们没有可以返回的后退页面。如果您手动导航到另一个URL，则不会阻止您返回。

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

需要注意的一件事是上面的代码做了两个假设：

  1. 您具有水平可滚动内容的元素具有类scrollable-h
  2. 如果检查到scrollLeft小于4px，然后将其滚动到5px，返回false有效地取消后向手势

重要提示： - 这仅会防止后向轻扫手势，如果您快速执行此操作，则仍会触发。

  • 此外，此方法不会防止前向轻扫手势，但也可以通过检查元素是否已达到最大scrollLeft来完成。如果是这种情况，请将其移回20px并返回false以防止事件发生...如果您认为这样做有意义，则可以添加此用例。

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

1
那么如何防止反弹呢？似乎唯一的方法是在滚动发生之后而不是之前检测是否到达边缘。 - Kevin Newman
1
@KevinNewman非常感谢你。我花了很多时间试图弄清楚为什么wheel事件上的preventDefault对我无效。但是当我注意到你评论中的“bounce”一词时，突然意识到问题所在。我在事件处理程序上使用了_.throttle，这破坏了preventDefault。虽然这与原始问题无关，但还是要感谢你！ - jastkand
0
我能够通过在地址栏中输入chrome://flags并下拉到“Overscroll history navigation”，将其设置为“Disabled”来禁用它。
这对我不起作用。Windows 10 Chrome v91 - H.C.Chen
0
发布一个非CSS答案，有时你无法访问。
使用disable-features=OverscrollHistoryNavigation运行chromium / chrome ：
# Run Chromium or Chrome with following flag
chromium --disable-features=OverscrollHistoryNavigation

通常建议使用其他与手势相关的标志（例如禁用通过捏合手势缩放的标志--disable-pinch），可以在这里找到：https://niek.github.io/chrome-features/，这是官方文档推荐的博客文章（在这里，底部）。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接