How to ensure the mousewheel/wheel event fires only once per scroll inside scrollable div

Question

I'm using pagePiling.js to create a one page scroll effect. Within one of the pagepiling sections, I have a child div that is scrollable. When the user gets to the section with the scrollable div inside it, I'd like them to be able to scroll to the top of each paragraph within the scrollable div every time they scroll downwards via the mousewheel.

The issue here is that the mousewheel/wheel event fires 2 times, 4 times, 12 times, or even 21 times when I move my mousewheel one "tick" (for lack of a better term), but I'd only like it to fire once. Otherwise my functions are firing too often and exhibiting a poor scrolling experience. The number of wheel events starts to jump when I either scroll inside the scrollable container specifically or when I jump back and forth between sections and try to scroll the scrollable container again.

So far I've tried implementing lodash.js and the debounce/throttle methods using addEventListener() in the past but I still receive multiple mouse events after a single wheel tick, similar to what I've described above.

I've created a codepen here to show what I've got so far. My issue begins within the mouseover function, here's what I've been working with so far:

$('.overflow-section').on('wheel', function(e) {
    var oEvent = e.originalEvent,
    delta  = oEvent.deltaY || oEvent.wheelDelta;
    if (delta > 0) {
        $('#scrollable-container').animate({
            scrollTop: $("#section-two").offset().top
        });
    } else {
        $('#scrollable-container').animate({
            scrollTop: $("#section-one")
        });
    }
});

Once I scroll to the bottom section, the console outputs 6 wheel events when I tick the wheel once but it should only fire once.

score 0 · Answer 1 · answered Aug 28 '19 at 20:21

You can take a look at Letarghy library. It is an attempt to solve problems with "kinetic scrolling" which is your case.

Note it won't be perfect tho, as there's literally no way to detect a single swipe/scroll in some devices. In that case a delay would be applied.

How to ensure the mousewheel/wheel event fires only once per scroll inside scrollable div

1 Answers1