Capture Scroll Event on Element with overflow: hidden Using Javascript

Question

EDIT: Thanks for the comments so far! Here's a JS fiddle with (hopefully all of) the relevant code:

I have an image slider set up where the images' classes are toggled between .above, .active and .below, and their top: attribute changes accordingly.

At the moment the toggle is activated by an event listener for up and down arrow key presses, and I have html, body { height: 100vh, overflow: hidden } so that the user can't scroll to the the images which are .below or .above.

Is there a way to still capture scroll up and down events and trigger the class changes using Javascript?

I've tried this solution, but it isn't working - var st is undefined no matter what I do to the page, which I guess is because no scroll event is being captured and therefore var st is never declared.

Thanks a lot!

Add an event that is a bit higher than the page, with no content and as overlay.when someone scrolls you can detect it with that element — Jonas Wilms, Sep 01 '16 at 17:43

score 0 · Answer 1 · answered Sep 02 '16 at 07:41

0

The body doesn't scroll, so there is no scroll event.

Have a look at a different set of events: mousemove, touch. Support for touch events can be rather varied across devices, so perhaps a library like Hammer would also come in handy.

answered Sep 02 '16 at 07:41

hashchange

7,029
1
45
41

Capture Scroll Event on Element with overflow: hidden Using Javascript

1 Answers1