Do something when scrolled using buttons / mouse wheel

Question

I'm using an UP button(upArrow) and a DOWN button (downArrow) to scroll a div. The code works fine. Below is the code set for those 2 buttons.

My question is, how do I join this when someone uses the mouse wheel to scroll?

Example: If someone uses the downArrow button to scroll down and reach at the bottom a pop-up shows ( if( val == (items) ){ //reasched end - now do something... } ). Now how do I make the popup show if someone uses the mouse wheel and instead of the buttons?

var numVal = 0,
    val = 0,
    items = 12,
    scrollVal = 300;
$('#downArrow').click(function() {
    numVal = numVal+scrollVal;
    val++;
    $("#itHolder").animate({
        scrollTop: numVal
    });
    if( val == (items) ){
         //reasched end - now do something...
     }
});
$('#upArrow').click(function() {
    numVal = numVal-scrollVal;
    val--;
    $("#itHolder").animate({
        scrollTop: numVal
    });
    if( val == 0 ){
        //reasched top - now do something...
    }
});

You can check it out here http://stackoverflow.com/questions/4326845/how-can-i-determine-the-direction-of-a-jquery-scroll-event — CASH, May 24 '15 at 17:54

score 0 · Answer 1 · answered May 24 '15 at 17:51

You could combine listening for the scrolling event on your containing div, with its scrollTop property to find when you hit the bottom...

$(myContainingDiv).on('scroll', function () {
    if (this.scrollTop() == this.height()) {
        // Do Something...
    };
});

Do something when scrolled using buttons / mouse wheel

1 Answers1