将滚动绑定到单击事件

Question

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

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

问题：

如何将鼠标滚轮滚动绑定到我的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/

声明：

我喜欢在包含对象 JQuery 的变量名称前添加一个“$”；所以我可以很容易地与对象 DOM 区分开来。