What's the difference between “onwheel” and “onscroll” events?

Question

When I tried to change the default scroll bar property, I found that it\'s not convenient by rewriting callback function for scroll() or onscroll e

Answer 1

MDN about onwheel:

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The onwheel event gets fired when the mouse wheel is scrolled. This physical action may or may not also result in scroll events.

Basically, onscroll is what you need.

Answer 2

onwheel: Occurs when the mouse wheel is rolled up or down over an element.

onscroll Occurs when an element's scrollbar is being scrolled.

It's important to note that in Internet Explorer, the wheel event is only supported through addEventListener. You can't use the onwheel event attribute.

onwheel doesn't work in Safari or in IE8 or earlier.

Answer 3

The onwheel event triggers on scroll AND on zoom, as you move the mouse wheel, while the onscroll event only occurs when an element's scrollbar is being scrolled (i believe that includes touch scrolling as well).

Answer 4

onwheel specifically fires when the mouse wheel is spun. onscroll fires for any kind of scrolling, including keyboard buttons like the arrow keys, Home, End, Page Up, Page Down, space bar, tabbing etc.

Note that onwheel is non-standard and should be avoided unless you're specifically targeting browsers that support it and/or are providing an extra feature whose absence won't be felt.