Using jQuery to detect a mouse scroll per instance, not per click
jquery, mousewheel, scroll
Solution
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!
Problem
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?