0

I'm trying to call a function when the mouse scroll down and one when it scroll up, but unfortunately, it seams like they are both called.

http://codepen.io/nickimola/pen/ZWjOyB?editors=1010

In the pen, I'm using an horizontal scroller to change slide on mouse scroll down (simulates next) and on mouse scroll up (simulates prev).

If you open the console, you can see that the right message is printed, but strangely, it seams that when I scroll up, also the scroll down event is fired. It is a bit strange and difficult to explain, it is clearer from the pen above.

here's the code i'm using to detect scrolling: 

$(document).ready(function(){
    $('html').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta / 120 > 0) {
            $.fn.fullpage.moveSlideLeft();
            console.log('scrolling up !');
        }
        else{
            $.fn.fullpage.moveSlideRight();
            console.log('scrolling down !');
        }
    });
});

and this is the plugin i'm using for the horizontal slider and the callback function: https://github.com/alvarotrigo/fullPage.js#fullpagejs

Nick
  • 13,493
  • 8
  • 51
  • 98
  • You have a rather naive approach... this will not work well at all with a trackpad, since your mousewheel event will be "spammed" with dozens of scroll events (there's no "click" like there is with a traditional mouse) – JDB Apr 23 '16 at 14:47
  • I was actually a bit afraid of cross compatibility with touches, mouses and trackpads to be honest... How would you do this? have you got any suggestion? – Nick Apr 23 '16 at 14:49
  • What is the `e.originalEvent.wheelDelta / 120` meant to do? – JDB Apr 23 '16 at 14:49
  • it came straight from this answer: http://stackoverflow.com/questions/8189840/get-mouse-wheel-events-in-jquery – Nick Apr 23 '16 at 14:51
  • Blind copy/paste from SO can be pretty dangerous, but even the answer you've mentioned has several comments questioning that division. http://stackoverflow.com/questions/8189840/get-mouse-wheel-events-in-jquery#comment28226164_15629039 – JDB Apr 23 '16 at 14:52
  • Yes, i also tried without that division but nothing really changes. – Nick Apr 23 '16 at 14:53

1 Answers1

1

There are several possible answers to this question, depending on what you want your User Experience to be.

I can only test on a trackpad, but one possible solution is to require a greater input threshold before initiating a scroll action:

var delta = e.originalEvent.wheelDelta / 120;
if(delta >= 1) {
    $.fn.fullpage.moveSlideLeft();
    console.log('scrolling up !');
}
else if(delta <= -1){
    $.fn.fullpage.moveSlideRight();
    console.log('scrolling down !');
}

This will ignore small scroll actions, or tiny reverses in direction after the initial scroll.

But the real issue here is that you are attempting to call your moveSlideRight function on ever scroll event. The only reason that you're not having more issues is that moveSlideRight seems to ignore duplicate calls while it's still animating the page. It'd probably be better to use some sort of time tracking, so that an initial scroll in one direction will start the slide, and then ignore all other scroll actions for some period of time (perhaps half a second). Again, though, it depends on your desired UX.

JDB
  • 25,172
  • 5
  • 72
  • 123