3

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
});
Dima Chubarov
  • 16,199
  • 6
  • 40
  • 76
Becky
  • 5,467
  • 9
  • 40
  • 73
  • @freedomn-m: thanks. I only want to be able to detect mousewheel scroll along with the click function as I'm going to implement this when scrolled over a div. – Becky Jun 05 '15 at 13:14

1 Answers1

7

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.

Community
  • 1
  • 1
tomloprod
  • 7,472
  • 6
  • 48
  • 66
  • can yu briefly exaplin this `$body.bind('scroll', function() {` ? why $body ? Also `.bind` will soon be depreciated so can I replace it with `.on` ? – Becky Jun 05 '15 at 13:05
  • why trigger the click rather than just removing the arrows on the page – I wrestled a bear once. Jun 05 '15 at 13:13
  • 1
    @Adelphia because if the user uses the mouse halfway and then continue with the arrows it would still work. that's the reason. – Becky Jun 05 '15 at 13:15
  • thanks. If I want to detect the scroll on a particular div (rather than $body), can I replace `$body` by `$('#divID')` ? – Becky Jun 05 '15 at 13:19
  • Yes, and all will work perfectly: but **remember** to add some `CSS` class like this: `#divID{ overflow:scroll; height:200px; }` Or the scroll will be of the document – tomloprod Jun 05 '15 at 13:27
  • Seems like you're getting up votes coz I've not closed this yet. I'll wait for a while before marking the correct answer. thanks. – Becky Jun 05 '15 at 13:29