mac 上的最新 Chrome 版本 (59) 无法阻止导航手势

Question

无法完全禁用双指滑动手势来浏览整个网站的浏览器历史记录一直让我感到烦恼。到目前为止，至少可以通过在鼠标滚轮事件上调用 preventDefault() 来防止该行为。

这似乎在 Chrome 59 中不再有效。

重现方法如下：

在页面某处开始手势，然后取消
从那时起，preventDefault 将不再起作用。

有人对此有解决方案吗？

例子

Zenkit 和 Airtable 都在您滚动进入其 table 视图时调用 preventDefault。起初它似乎在工作，但是一旦手势被识别然后至少取消一次（在 table 之外，其中不调用阻止默认值），阻止手势不再起作用（即使在内部table）。所以从那里开始，在 table 内向左滚动几乎是不可能的，因为它总是触发手势。

在 Trello 的看板视图中，它仅在您位于滚动条的左侧或右侧时才会出现。但我猜这是因为他们使用原生滚动，而 Zenkit 和 Airtable 使用 css 翻译。

我尝试在用户开始滚动后在内容顶部创建一个不可见的滚动容器，然后将其删除。这显着减少了问题，但并非在所有情况下都有效。

示例代码： https://codepen.io/anon/pen/gRKaMX

这支笔有3个盒子。

第一个使用 overflow: scroll 本机滚动。这里只有当scrollLeft为0时才能触发手势。
第二个附加了一个事件侦听器，它在每个鼠标滚轮事件上调用 preventDefault。这首先会阻止手势，但一旦您在页面上的其他任何地方启动它，它就不再起作用了。
最后还有第三个 div，您可以随时启动手势。

Whosebug 也希望我内联代码，所以这里是：

HTML:

 Native Scrolling:
<div id="native-scrolling" class="box">
  <div></div>
 </div>

Prevent gesture by calling prevent default. Only works if you didn't start the gesture anywhere else, yet:
<div id="prevent-gesture" class="box"></div>

Just a normal div:
<div class="box"></div>

JavaScript:

$('#prevent-gesture').on('mousewheel', function (event) {
  event.preventDefault();
});

CSS:

.box {
  height: 100px;
  width: 200px;
  background: black;
}

#native-scrolling {
  overflow: scroll;
}

#native-scrolling > div {
  width: 200%;
  height: 10px;
}

提前致谢，杰西

编辑：关于已接受的答案

重新启动 Chrome 可以暂时解决此问题，但它会反复出现。我现在在使用 Chrom 69，它仍然会出现。

Answer 1

您是否尝试过将其关闭然后重新打开？

Answer 2

在https://bugs.chromium.org/p/chromium/issues/detail?id=889846#c3

上查看我的回答

This is expected behavior on Chrome.

If you are developer, please try to use overscroll-behavior to fix it. https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

If you are user, please try to disable overscroll swipe on MacOS settings. See thread you provide. https://community.airtable.com/t/triggering-back-gesture-in-chrome-on-macos-when-scrolling-to-the-left/3074/6

For event.preventDefault() is not cancellable every wheel event. https://github.com/w3c/uievents/pull/171/commits/824a919756b4c5702a9878efd45ea5c93a2d73a3

mac 上的最新 Chrome 版本 (59) 无法阻止导航手势

Can't prevent navigation gesture in latest Chrome version (59) on mac

javascript

google-chrome

gesture

macos-sierra

preventdefault

重现方法如下：

例子

编辑：关于已接受的答案