“onwheel”和“onscroll”事件有什么区别？

Question

当我尝试更改默认的滚动条属性时，我发现通过重写scroll()或onscroll事件的回调函数并不方便，相反，我应该为“onwheel”事件重写一个回调函数。

那么onwheel和onscroll之间有什么区别呢？我想浏览器的默认onwheel处理程序会自动触发onscroll函数来移动滚动条，这就是为什么在onwheel的回调中调用preventDefault将阻止滚动条移动。我是对的吗？谁能给出更好、更具体的解释？

- alvinzoo

---

onwheel？我以前从没见过这个词啊 o.O - Cerbrus

MDN关于onwheel事件的说明："非标准 该功能是非标准的，不在标准轨道上。不要在面向Web的生产网站上使用它：它不适用于每个用户。在不同实现之间可能存在很大的不兼容性，并且行为将来可能会更改。" - Cerbrus

onwheel 不是标准的，也不是所有浏览器都实现了它。它无法捕捉箭头、空格键等方式的滚动。 - epascarello

似乎只有“wheel”是标准实现。不同之处在于，当鼠标或其他输入设备上的滚轮被使用时，“wheel”会触发；而“scroll”则在任何滚动情况下触发，无论是通过滚轮、点击滚动箭头还是使用滚动手柄等方式。 - Shilly

CMIW 看起来 Cerberus 的评论不再适用了。https://html.spec.whatwg.org/multipage/webappapis.html#handler-onwheel - Jay Wick

Answer 1

onwheel事件在鼠标滚轮滚动时触发。 onscroll事件在任何类型的滚动时触发，包括键盘按钮如箭头键，Home，End，Page Up，Page Down，空格键，制表符等。

请注意，onwheel是非标准的，除非您专门针对支持它的浏览器并/或提供一个其缺失不会被感知的额外功能，否则应将其避免使用。

- Niet the Dark Absol

---

为什么当鼠标滚轮或onwheel事件触发时页面会滚动，但如果阻止鼠标滚轮或onwheel事件，则不会滚动？这是否意味着在鼠标滚轮的默认行为内触发滚动？ - alvinzoo

是的。这正是点击链接并调用“preventDefault（）”来阻止导航的原因。 “onwheel”的默认行为是滚动页面。 - Niet the Dark Absol

请注意，onwheel确实是标准的一部分。 - DanielM

Answer 2

onwheel: 当鼠标滚轮在元素上向上或向下滚动时发生。

onscroll：当元素的滚动条被滚动时发生。

需要注意的是，在Internet Explorer中，仅通过addEventListener支持滚轮事件。不能使用onwheel事件属性。

onwheel不适用于Safari或IE8或更早版本。

- Richard Hamilton

---

自从 Safari 7 版本以来，onwheel 在其中起作用。 - Moritz

Answer 3

onwheel事件在滚动和缩放时触发，当你移动鼠标滚轮时，而onscroll事件仅在元素的滚动条被滚动时发生（我相信这也包括触摸滚动）。

- Andrei C

Answer 4

MDN关于onwheel的说明：

非标准特性
此特性为非标准特性，不在标准跟踪中。不要在面向 Web 的生产站点上使用它：它将无法为每个用户工作。实现之间可能存在大量不兼容性，并且行为可能会在未来发生变化。

当鼠标滚轮滚动时，触发onwheel事件。这种物理操作可能也会导致滚动事件。

基本上，您需要使用onscroll。

- Cerbrus