javascript - 绑定(bind)滚动到点击事件

Question

我的页面上有一个 downArrow 和 upArrow 按钮来控制滚动。

当滚动到页面底部时，向下箭头 消失；滚动到顶部时，向上箭头 消失。一切都很完美。

问题:

如何将鼠标滚轮滚动绑定(bind)到我的 click 函数？因此，如果用户使用鼠标滚轮滚动，箭头会相应地消失。

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

Answer 1

您可以检查网站的滚动，并根据滚动值触发downArrow 和upArrow 按钮的click 事件。这会起作用。

查看网站滚动条:

// 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/

---

检查元素的滚动:

// 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();

});

记得像这样添加一些 CSS 代码，否则滚动将是文档的:

#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.