How to check scroll top or bottom without using scrollTop?

Question

Hi is there a way to check if there is a way to check mousewheel event up or down without checking where it last scrolled. As I have disabled my scrolling and used animate instead of scroll.

var currentTop = 0;    
var scrolling = false;
var allowNextAnimation = true;

$('.contactDiv').on('scroll touchmove mousewheel', function(e){
if (!scrolling && allowNextAnimation) {

    if (scrollTop)
       currentTop = currentTop + 70;
    else if (scrollDown)
       currentTop = currentTop - 70;
    scrolling = true;
    $('.contactDiv').animate({
        scrollTop: currentTop
    }, 500, function(){
        scrolling = false;
        allowNextAnimation = false;
    });

    return false;
}
allowNextAnimation = true;
});

I need some way to know if the mouse scrolls up or down without knowing where scrollTop is. Any advice?

For mousewhell, check this answer : http://stackoverflow.com/questions/18880159/use-jquery-to-check-mousewheel-event-without-scrollbar . For swipe events I suggest you to use http://hammerjs.github.io/ . If you are interested I can explain to you in an answer. — drinchev, Oct 09 '14 at 10:04

score 0 · Answer 1 · answered Oct 10 '14 at 13:26

For mousewheel event:

$('html, body').on('mousewheel MozMousePixelScroll', function (event) {
    var delta = event.originalEvent.wheelDelta * -1
                  || event.originalEvent.detail;
    if(delta < 0){
        console.log('scroll up');
    } else {
        console.log('scroll down');
    }
});

You can see example on jsFiddle that blocks mousewheel scroll for 300 ms if middle container reached top/bottom and you continue scrolling mousewheel up/down. After 300 ms of inactivity you can scroll document.

For touch event track pageY event property

How to check scroll top or bottom without using scrollTop?

1 Answers1