将滚动条绑定到单击事件上

Question

我页面上有向下和向上滚动按钮，用于控制页面的滚动。当滚动到页面底部时，向下箭头消失；当滚动到页面顶部时，向上箭头消失。一切都运作得很完美。

问题是：如何将鼠标滚轮滚动绑定到我的点击功能？这样，如果用户使用鼠标滚轮滚动，箭头也会相应地消失。

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

- Becky

---

@freedomn-m：谢谢。我只想能够检测鼠标滚轮滚动，以及点击功能，因为当我在一个div上滚动时，我要实现这个功能。 - Becky

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 对象。

- tomloprod

---

你能简要解释一下 $body.bind('scroll', function() { 吗？为什么是 $body？另外，.bind 很快就会被弃用了，我可以用 .on 来替换它吗？ - Becky

为什么要触发点击事件而不是直接在页面上移除箭头？ - I wrestled a bear once.

@Adelphia，因为如果用户在使用鼠标的一半时转而使用箭头键，它仍然可以正常工作。这就是原因。 - Becky

如果我想检测特定 div 上的滚动（而不是 $body），我可以用 $('#divID') 替换 $body 吗？谢谢。 - Becky

是的，所有的内容都将完美运行：但请记得添加一些 CSS 类，例如 #divID{ overflow:scroll; height:200px; }，否则滚动条将属于整个文档。 - tomloprod

看起来你得到了一些赞，因为我还没有关闭这个问题。在标记正确答案之前，我会等一段时间。谢谢。 - Becky