Question

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

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

问题：

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

我想添加＆＃34; $ ＆＃34;在包含对象JQuery的变量名之前;所以我可以轻松地从对象DOM中区分出来。

将滚动绑定到单击事件

1 个答案:

检查网站滚动：

检查元素的滚动：