javascript - Bind scroll to on click event - Stack Overflow

admin管理员组

文章数量:1315118

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

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

• javascript
• jquery
• scroll
• onclick

Share Improve this question Follow edited Jun 9, 2015 at 13:58 Dima Chubarov 17.2k77 gold badges4343 silver badges8282 bronze badges asked Jun 5, 2015 at 12:55 BeckyBecky 5,60599 gold badges4343 silver badges7878 bronze badges 1

• @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 Commented Jun 5, 2015 at 13:14

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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/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/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.

本文标签： javascriptBind scroll to on click eventStack Overflow