Using jQuery to detect a mouse scroll per instance, not per click

Question

What I'm attempting to do is move an element while a user scrolls up or down. I have the mechanics of this within a function called goTo(). I am also trying to track where the user is by using a variable. When the user scrolls up or down, the variable goes up or down by one. This is what my function looks like so far:

$(window).on('DOMMouseScroll mousewheel', function(event){

 clearTimeout($.data(this, 'timer')); // NEW CODE 

 $.data(this, 'timer', setTimeout(function() { // NEW CODE

    if( event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0 )
    {
        --curScl;
        goTo(curScl);

    } else {
        ++curScl;
        goTo(curScl);
    }

 }, 250)); // NEW CODE 

});

UPDATE: Per the advice of @Bart Jedrocha, I've added a setTimeout wrapper that keeps the value of curSel from skyrocketing with every scroll. However, there is a delay between when the scroll is executed, and when the element moves. It feels very unnatural. Is there a way to do this without the delay?

Telescopium

Answer 1

Though setTimeout does technically work, there is a slight delay between when the user scrolls their mouse and when the page scrolls. This feels unnatural and gets annoying. Thus, I needed another solution.

var scl=0; // Create a variable

window.setInterval(function(){
   scl=0; // Reset this variable every 1.5 seconds
}, 1500);

$(window).on('DOMMouseScroll mousewheel', function (e) { 
// Detect movement on the scrollwheel anywhere in browser window

if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {

    while(scl==0) { 
    // Create a while loop that only executes while your variable equals 0

        // CODE HERE            

        scl++; // Make your variable equal 1 after executing once
    }

} else {

    while(scl==0) { 
    // Same deal, but this time while the user scrolls down

       // CODE HERE

        scl++;
    }

}

});

This seems to work without a problem. If anyone sees a spot where this can be cleaned up a bit, please let me know. Thanks!

Telescopium

Why while loop and not just IF check? – Gyrocompass

Answer 2

If I understand correctly, you're attempting to increment/decrement by 1 at the stop of a scroll event. Unfortunately there is no scrollStop event that you can bind to. You could use a setTimeout within your event handler to prevent the variable being increased on every tick of the scroll wheel. Take a look at this for an example.

Trichiasis

This works! ...ish. There is a pause between the scroll wheel being moved and the element being effected. – Telescopium

Answer 3

You can always check system time passed since last call of the event.

var c_time = 0;

$(window).on('DOMMouseScroll mousewheel', function(event){
    if(($.now() - c_time) > 500) //0.5s
    {
        c_time = $.now();
        //Do smthng there...
    }
});

Chaves