以下是如何重现它：

Question

无法完全禁用双指轻扫手势以浏览整个网站的浏览器历史记录对我来说是一个持续的烦恼。到目前为止，至少可以通过在mousewheel事件上调用preventDefault（）来防止这种行为。

这在Chrome 59中似乎不再起作用。

以下是如何重现它：

在页面的某处开始手势，然后取消它
从那以后，preventDefault无效。

有没有人有解决方案？

实施例

Zenkit和Airtable在您的表视图中滚动时都会调用preventDefault。它似乎首先工作，但一旦手势被识别然后至少取消一次（在桌子外面，防止默认不被调用），防止手势不再工作（甚至在桌子内部））。因此，从那里开始，向桌面左侧滚动几乎是不可能的，因为它总是触发手势。

在Trello的看板视图中，只有当您在滚动条的左边缘或右边缘时才会出现。但我想这是因为他们使用原生滚动而Zenkit和Airtable使用css翻译。

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

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

此笔中有3个方框。

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

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

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上查看我的答案

这是Chrome上的预期行为。

如果您是开发人员，请尝试使用overscroll-behavior对其进行修复。   https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

如果您是用户，请尝试在MacOS上禁用过度滚动滑动   设置。查看您提供的线程。   https://community.airtable.com/t/triggering-back-gesture-in-chrome-on-macos-when-scrolling-to-the-left/3074/6

对于event.preventDefault（）并非每个轮事件都可以取消。   https://github.com/w3c/uievents/pull/171/commits/824a919756b4c5702a9878efd45ea5c93a2d73a3

在Mac

以下是如何重现它：

实施例

编辑：关于接受的答案

2 个答案: