并非所有车轮事件在 Chrome (Opera) 中都可以取消答案

【问题标题】：Not all wheel events are cancelable in Chrome (Opera)并非所有车轮事件在 Chrome (Opera) 中都可以取消
【发布时间】：2018-12-09 20:12:57
【问题描述】：

我发现 Chrome 68 (Opera 55) 中并非所有的车轮事件都可以取消。例如。有以下代码：

#block {
    width: 10em;
    height: 10em;
    border: 1px solid black;
    overflow: auto;
}

#block div {
    margin: 0.5em;
    padding: 0.5em;
    border: 1px solid blue;
}

<div id="block" onwheel="console.log(event.cancelable)">
        <div>*****</div>
        <div>*****</div>
        <div>*****</div>
        <div>*****</div>
        <div>*****</div>
        <div>*****</div>
</div>

如果您运行它并尝试滚动块，您会看到并非所有事件都可以取消，也就是说，控制台中有 false 值。

但是，对于 Firefox，所有事件都可以取消。

在我看来，当您取消一系列车轮事件中的第一个事件时，所有后续事件也将被取消。但是我怎样才能知道是否有一系列事件或只有一个可取消的事件？

当用户到达块的底部时，我需要更改块的内容。内容更改后，块自动向上滚动到初始位置，我在内容更改后100毫秒内取消所有事件。但是，在 Chrome 的情况下，我在第二个/第三个不可取消的轮子事件发生后更改了内容（因为当用户还没有到达底部时第一个没有被取消），然后我就不能取消其他事件，所以内容改变后块会滚动。

有什么解决办法吗？ Chrome 的行为是正确的还是只是一个错误？

【问题讨论】：

标签： javascript mousewheel

【解决方案1】：

“异步触摸板捏缩放事件”中的某些内容可能是相对的 Chrome 71 Beta: relative time formats and more。您可能必须始终调用preventDefault() 并使用scrollBy() 来模拟默认行为。

【讨论】：

是的，Chrome的这种行为可能只是一种优化。当浏览器知道无法取消偶数时，可以进行一些重要的优化。

【解决方案2】：

我想出了一个相当生硬的解决方案。仅当滚动事件可取消时，我才更改块的内容。换句话说，当一系列轮子事件被触发时，我只关注可取消事件，如果一个可取消事件（这是系列中的第一个）被触发并且已经到达块的底部，我改变块的内容。如果一个事件是不可取消的，它就会被忽略。

是的，如果已经快到了块的底部，但还没有到达，有一种阻塞效果，因为即使用户用力滚动滚轮，到达底部时内容也不会改变.但是，在我看来这不是什么大问题，在这种情况下可能会应用优化——可取消事件的 deltaY 属性可能会被考虑在内，如果它大到足以将内容滚动到底部，则事件可能是取消后，内容可能会以编程方式滚动，然后可能会更改内容。

【讨论】：