How can UP/DOWN scroll be distinguished in jQuery?

The easiest and best way for me to tell was…


var tempScrollTop, currentScrollTop = 0;
$("#div").scroll(function(){
currentScrollTop = $("#div").scrollTop();
if (tempScrollTop < currentScrollTop )
//scrolling down
else if (tempScrollTop > currentScrollTop )
//scrolling up
tempScrollTop = currentScrollTop;
}

This works with mousewheel, up/down arrows, and slider.

If you need to detect only mousewheel scroll you can do following:

 


$('#div').mousewheel(function(e,a){
if(a < 0){
// scrolling down
}else{
//scrolling up
}
});

 

If you want to use mouse scroll to scroll horizontally on any html element instead of scrolling vertical please go through the following post

scroll-horizontally-on-mouse-wheel-scroll — Example:- horizontal-scroller-showcase
 

Comments

comments

Uncategorized

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>