Touchpad scroll detection in JS, no library

Question

I'm making my own little Javascript library that makes it easy to replace the default scrollbars for your Website (and mine) with custom ones. Part of that means giving the BODY element an "overflow:hidden" style to hide the normal scrollbars. However, this prevents all scrolling except for that which is done in code.

I have everything working in terms of showing the bar and having it scroll when you click/drag it. However, many touchpads (like on the computer I'm testing this with) have a feature where you can scroll by sliding a finger along the right side of the pad. I need the library not to break that, so I need some way of detecting when the user tries to scroll this way.

I thought it would be interpreted by the browser as a mouse wheel, so I set up an onmousewheel event, but that doesn't seem to capture it at all. For the record, I'm testing with Firefox 25.0.1.

Is there any way to capture the trackpack scrolling, preferably without an external library? I'm trying to keep this as self-contained and lightweight as possible, but if I absolutely need to, I guess I can use jQuery and its mousewheel extension...

What browser are you testing with? Some browsers use the `onwheel` event instead of `onmousewheel`. — Robbie Wxyz, Nov 20 '13 at 20:12
As I said, I'm testing with Firefox 25.0.1. I haven't heard of onwheel...I'll try that out as soon as I have access to my files later. Thanks. — Daniel Burnett, Nov 21 '13 at 02:17
That worked! But unless I'm missing something, since your comment was posted as an answer, I can't +1/accept it...but thanks! — Daniel Burnett, Nov 21 '13 at 03:59

score 4 · Accepted Answer · answered Nov 22 '13 at 18:33

4

Some browsers use the onwheel event instead of onmousewheel. So, it's usually a good idea to listen for both events.

See this MDN article for more about onwheel.

answered Nov 22 '13 at 18:33

Robbie Wxyz

7,671
2
32
47

Touchpad scroll detection in JS, no library

1 Answers1

Linked