17

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 events, instead, I should rewrite a callback function for "onwheel" events.

So what's the difference between onwheel and onscroll anyways? I imagine that default onwheel handler by browsers would automatically trigger onscroll function to move the scroll bar, which is why preventDefault in onwheel's callback will prevent scroll bar moving. Am I right? Who has a better and more specific explanation?

fent
  • 17,861
  • 15
  • 87
  • 91
alvinzoo
  • 493
  • 2
  • 8
  • 17
  • `onwheel`? I've never seen that before o.O – Cerbrus Sep 22 '15 at 14:24
  • 6
    [MDN about `onwheel`:](https://developer.mozilla.org/en-US/docs/Web/API/Element/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."_ – Cerbrus Sep 22 '15 at 14:25
  • onwheel is not standard and not all browsers inplement it. It does not catch scrolling via arrows, spacebar, etc. – epascarello Sep 22 '15 at 14:25
  • 2
    Just 'wheel' is the standard implementation it seems. The difference is that wheel triggers when the wheel on a mouse or other input device is used. And scroll triggers anytime you scroll, be it whith a wheel or by clicking the scroll arrows or using the scroll hand or whatever. – Shilly Sep 22 '15 at 14:27
  • CMIW Looks like Cerberus comment no longer applies. https://html.spec.whatwg.org/multipage/webappapis.html#handler-onwheel – Jay Wick Feb 28 '19 at 00:14

4 Answers4

22

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.

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • Why the page will scroll when wheel or onwheel fires and won't scroll as default if wheel or onwheel is prevented? Does it mean that scroll if triggered inside the default behavior of wheel? – alvinzoo Sep 22 '15 at 16:23
  • Yes. It's the same reason that clicking a link and calling `preventDefault()` prevents navigation. The default behaviour of `onwheel` is to scroll the page. – Niet the Dark Absol Sep 22 '15 at 16:27
  • Note that `onwheel` _is_ part of the standard, though. – DanielM Jan 19 '23 at 08:04
5

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.

Richard Hamilton
  • 25,478
  • 10
  • 60
  • 87
2

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).

Andrei C
  • 768
  • 9
  • 21
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.

Cerbrus
  • 70,800
  • 18
  • 132
  • 147