有没有一种可靠的方法来检测所有设备上的滚动，使用javascript / jQuery？

Question

我一直在努力解决这个问题，我很惊讶这样做并不是那么简单......

我需要检测用户何时滚动页面，使用鼠标，滚动条或移动设备上的触摸。 jQuery有自己的scroll()函数可以正常工作，但它要求页面实际滚动。 我想检测页面滚动或不滚动的滚动（说我到达页面的末尾，并且没有任何地方可以滚动...我仍然想知道用户是否正在尝试滚动）

我找到了另一个问题类似的问题，即使在页面不滚动的情况下检测滚动输入，我得到了这段代码：

if (document.addEventListener) {
    document.addEventListener("mousewheel", MouseWheelHandler(), false);
    document.addEventListener("DOMMouseScroll", MouseWheelHandler(), false);
} else {
    sq.attachEvent("onmousewheel", MouseWheelHandler());
}

function MouseWheelHandler() {
    return function (e) {
        var e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

        if (delta < 0) {
            // increase scroll amount
        } else {
            // decrease scroll amount
        }
    }

    return false;
}

起初，这似乎可以解决这个问题，但我发现它并没有真正用不同类型的鼠标返回平衡结果，而且触摸事件也不能很顺利，这是这个问题的核心方面。

我在一个项目中使用它，在滚动上做了很多花哨的事件，实际的页面实际上根本没有滚动...但是我遇到了所有标准鼠标都非常慢的问题，但是我的Apple Magic Mouse鼠标速度非常快。 我知道这里自然会有一些区别，因为魔法鼠标的滚动速度更快，但差异远远小于平常鼠标之间的平衡。

我希望有一种方法可以改进这一点，以获得更可靠的结果，以及各种不同的输入。 有什么建议么？

编辑：

为了澄清，为了让答案适合我，它需要处理一个不可滚动的元素。 我有一个页面根本不滚动，但有其他事件在用户滚动时触发。 这意味着我不能使用基于窗口滚动位置的属性（例如scrollTop() ）。

Answer 1

你应该使用window.onscroll大多数用法然后创建一个新的监听器来专门处理顶部和底部滚动条件我建议使用桌面浏览器的鼠标滚轮事件和一个特殊编码的触摸响应器，如下所示，以检测他们是否正在尝试滚动，什么方向，如果可以在当前window.scrollY值。

var isOverScroll = function isOverScroll ( touchStartY, touchEndY ) {

    if ( Math.abs( touchStartY - touchEndY ) < 5 ) &&
         ( ( window.scrollY = window.innerHeight && touchStartY - touchEndY > 0 ) ||
           ( window.scrollY = 0                  && touchStartY - touchEndY < 0 ) ) ) {
       return false;
    }

    return true;

}

无法检测滚动条事件，将其与当前代码结合使用，只有当scrollY位置为0或max时才触发鼠标滚轮和触摸事件。

如果您试图完全摆脱滚动条这是一个非常糟糕的主意，因为它既是用户的一个很好的工具，也是一个标准的ui部分。 如果您尝试使用可滚动的全页应用并且不想使用滚动条尝试使用幻灯片。 无论哪种方式都不继续设置缓慢的滚动值而只是使用css移动整个身体：

 transition: transform3d( 0, YOURSCROLLVALUE , 0);

Answer 2

一种可能的解决方案是使用插件进行滚动

ISCROLL

在这个例子中：

例

他们使用功能拉动刷新，在达到可用的最大滚动时将触发，此处您可以使用任何自定义功能（即使您的项目不可滚动）。