CODEWITHSUNDEEP
javascriptjqueryscrollonclick
Becky
Becky

Reputation: 5585

Bind scroll to on click event

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
});

Upvotes: 3

Views: 8793

Answers (1)

tomloprod
tomloprod

Reputation: 7862

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.

Upvotes: 7

Related Questions