将滚动绑定到单击事件

Question

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

滚动到页面底部时,向下箭头消失; 和向上箭头时,滚动到顶部消失.一切都很完美.

题:

如何将鼠标滚轮滚动到我的on click功能？因此,如果用户使用鼠标滚轮滚动,则箭头会相应消失.

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

Answer 1

您可以检查网站的滚动并根据滚动值触发click事件downArrow和upArrow按钮.这会奏效.

检查网站的滚动:

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

我想在包含对象JQuery的变量名之前添加一个" $ "; 所以我可以很容易地从对象DOM中区分出来.