绑定滚动到点击事件

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/

ACLARATION:

I like to add an " $ " before the name of variables which containing objects JQuery ; so I can differentiate from the objects DOM easily.

绑定滚动到点击事件

Bind scroll to on click event

javascript

jquery

scroll

onclick

查看网站滚动条：

检查元素的滚动：