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大多数用法，然后创建一个新的监听器来专门处理顶部和底部滚动条件我建议使用mousewheel事件用于桌面浏览器和一个特殊编码的触摸响应器，如下所示如果他们正在尝试滚动，那么在当前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或最大值时才触发鼠标滚轮和触摸事件。

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

 transition: transform3d( 0, YOURSCROLLVALUE , 0);

Answer 2

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

ISCROLL

在这个例子中：

Example

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

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

编辑：

2 个答案: