Bind scroll to on click event

Question

I've got a downArrow and upArrow buttons on my page to control scrolling.

When scrolled to the bottom of the page, the down arrow disappears; and the up arrow disappears when scrolled to the top. Everything works perfectly.

Question:

How do I bind the mouse wheel scroll to my on click function? So if a user scrolls using the mouse wheel, the arrows disappear accordingly.

$('#downArrow').on('click', function () { //how to bind mouse scroll?
    //scroll down
});

Answer 1

You can check the scroll of the website and trigger the click event of downArrow and upArrow buttons depending of the scroll value. This will work.

Check scroll of the website:

// We get the $(document) —or $(window)—, because we want to check the scroll of the website. 
var $body = $(document), oldScrollValue = 0;

$body.on('scroll', function() {

    if ($body.scrollTop() > oldScrollValue ) {
          $('#downArrow').trigger('click');
    }else{
          $('#upArrow').trigger('click');
    }

    oldScrollValue = $body.scrollTop();

});

JSFiddle: http://jsfiddle.net/tomloprod/has67o9r/

---

Check scroll of an element:

// We get the `$("#divID")`, because we want to check the scroll of this element. 
var $element = $("#divID"), oldScrollValue = 0;

$element.on('scroll', function() {

    if ($element.scrollTop() > oldScrollValue ) {
          $('#downArrow').trigger('click');
    }else{
          $('#upArrow').trigger('click');
    }

    oldScrollValue = $element.scrollTop();

});

Remember to add some CSS code like this, or the scroll will be of the document :

#divID{
   overflow:scroll;
   height:200px;
}

JSFiddle: http://jsfiddle.net/tomloprod/has67o9r/1/

ACLARATION:

I like to add an " $ " before the name of variables which containing objects JQuery ; so I can differentiate from the objects DOM easily.