Question

我发现并不是所有的车轮事件都可以在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的行为是否正确，或者仅仅是错误？

Answer 1

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

Answer 2

我提出了一个比较直率的解决方案。仅在取消滚动事件时才更改块的内容。换句话说，当触发一系列轮事件时，我只关注可取消事件，如果触发了可取消事件（该事件是该系列中的第一个事件）并且已经到达块的底部，则我进行更改块的内容。如果事件不可取消，则将其忽略。

是的，如果几乎到达了该块的底部，但仍未到达该块，则存在一种阻挡效果，因为即使用户强烈滚动滚轮，到达该底部时内容也不会改变。但是，这对我来说不是什么大问题，在这种情况下可以应用优化-可取消事件的deltaY属性可能会被考虑在内，如果它足够大以将内容滚动到底部，则该事件可能是取消后，可以以编程方式滚动内容，然后可以更改内容。

并非所有车轮事件在Chrome（Opera）中都可以取消

2 个答案: