-1

I'm trying to listen to the scroll wheel event to get the "expected number of pixels scrolled" in a deltaX and deltaY value, and this across browser. I am surprised about how few documentation and libraries there is to make this. (only the Mozilla MDN even talks about the "wheel" event).

I found two scripts supposed to make this work across browser but I can't make any of those operate properly.

https://developer.mozilla.org/fr/docs/Web/Events/wheel
On this page "Listening to this event across browser" section provides a script supposed to solves this issue. I get this error

wheel.js:30 Uncaught TypeError: elem[_addEventListener] is not a function.

and also

https://github.com/anvaka/wheel/blob/master/index.js
With this one, just as the other one I get errors too :

wheel.js:17 Uncaught ReferenceError: module is not defined
index.js:144 Uncaught ReferenceError: require is not defined

Can someone manages to make it work or have another solution ?

Pierre Rose
  • 651
  • 3
  • 11
  • check this first https://stackoverflow.com/questions/3715496/binding-to-the-scroll-wheel-when-over-a-div – Nikola Spalevic Sep 10 '17 at 09:17
  • I do believe that the answers provided there mention no support for deltaX (and are basically about detecting if scrolling down / up as a boolean, but not about returning actual pixels value.) I don't mean to be lazy. I would dive into the code but I just feel like browser compatibility is a mess with this wheel event. I mentionned two script that were supposed to account all of this by creating a method. This hosted on platforms supposed to serve as reference (mozilla MDN, github/npm). I just can't get them working. – Pierre Rose Sep 10 '17 at 09:37
  • 1
    The MDN example is working perfectly, as expected. Have a look a this [**CodePen**](https://codepen.io/Bes7weB/pen/PKMemY?editors=1111) – Louys Patrice Bessette Sep 10 '17 at 09:39
  • You should provide the code which trigger those errors. Please read [MCVE](https://stackoverflow.com/help/mcve) – Louys Patrice Bessette Sep 10 '17 at 09:43
  • What... You are right. https://codepen.io/rsepierre/pen/ZJgodo/ (method is used at the script's bottom) Weird thing though in my codepen, if i set an any other element than "window" as an element target : frame, origin, $('body') . I get the error. If i put "window" back it works as expected. (Though I won't be able to define "where" on the page it will / won't work. – Pierre Rose Sep 10 '17 at 09:47
  • 1
    For that MDN example, the element you pass on has to exist and beeing "scrollable". And if you want to get them from a jQuery element, add `[0]` to it. Like `$("body")[0]`. Remember that jQuery is a "superset" of JavaScript. ;) – Louys Patrice Bessette Sep 10 '17 at 09:50
  • 1
    frame[0], origin[0]. It defenitly did the trick... thanks. Usualy I manage to debug this but the console error was somewhat confusing to me. Thank you a lot. – Pierre Rose Sep 10 '17 at 09:55

1 Answers1

1

Issue solved thanks to @Louys Patrice Bessette's advice.

The method provided on Mozilla's MDN website defenitly works as expected:
https://developer.mozilla.org/fr/docs/Web/Events/wheel#Listening_to_this_event_across_browser

The error:

Uncaught TypeError: elem[_addEventListener] is not a function.

Can be due to wrong element being targeted. If using jQuery donc forget to specify $('element')[0]

The codepen provided by @Louys Patrice Bessette shows the method in action. https://codepen.io/Bes7weB/pen/PKMemY?editors=1111

I hope this will be useful for others.

Pierre Rose
  • 651
  • 3
  • 11