Question

我正在开发一个项目，我想在用户使用鼠标滚轮滚动和窗口滚动时执行某些操作（通过滚动右侧滚动条）
我已经提出了解决方案，但它以两种方式进行操作，即当用户通过鼠标滚轮滚动并通过使用窗口上的滚动条手动滚动时。
这是我的代码，它检测鼠标滚轮和窗口滚动条

$(window).scroll(function(event){
        var st = $(this).scrollTop();
            if (st > lastScrollTop){
                $( "#gear1" ).css( "-webkit-transform", "rotate(" + (r + 10) + "deg)" );
                r = r + 10;

            } else {

                $( "#gear1" ).css( "-webkit-transform", "rotate(" + (r - 10) + "deg)" );
                r = r - 10;
            }
          lastScroll = st;
});

当用户滚动鼠标滚轮并且用户滚动浏览窗口滚动条时，我想执行不同的操作。

我需要这样的东西：

If (scroll type is Mouse wheel ){
   // Do some action
}

If (scroll type is Window scroll (Scrolling by Scrollbar on right side of browser window) ){
   // Do some action
}

Answer 1

您可以使用此library来检测鼠标滚轮的移动。以下是如何将它与jQuery（从文档中复制的代码）一起使用：

$('#my_elem').on('mousewheel', function(event) {
   //...
});

或者，您可以在不使用任何库的情况下使用以下代码：

$('body,html').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function(e){
 if ( e.which > 0 || e.type == "mousedown" || e.type == "mousewheel"){
    //...
 }
})

如果您使用第二个选项，则不使用鼠标滚轮检测滚动的代码为：

$(window).scroll(function(e){
    //...
});

Answer 2

您可以捕获mousewheel事件并阻止其默认设置，如果您使用鼠标滚轮，则应该阻止scroll发生。然后为另一个案件处理scroll。请注意，不同的浏览器/操作系统/输入设备处理mousewheel的方式截然不同。我认为this jQuery plugin会尝试将其标准化，但不是通过设备而是通过最大输入，因此YMMV。

示例：

$(window).on("scroll", function(evt) {
  console.log("scroll NOT by mouse");
});

$(window).on("mousewheel", function(evt) {
  console.log("scroll by mouse");
  evt.preventDefault();
});

如何在Jquery中以不同方式检测“鼠标滚轮滚动”和“窗口手动滚动”

2 个答案: