是否有可靠的方法来检测所有设备上的滚动，使用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;
}

一开始，这似乎很管用，但我发现它并不能真正地对不同类型的老鼠返回平衡的结果，而且对于触觉事件也不是很顺利，这是这个问题的核心部分。

我在一个在滚动上做很多花哨事件的项目中使用这个，实际的页面实际上根本没有滚动.但我遇到的问题是，我的所有标准鼠标速度都非常慢，但在我的苹果魔术鼠标上速度却是惊人的快。我知道这里自然会有一些不同，因为神奇的老鼠滚动得更快，但这种差异远远超出了老鼠之间的平衡。

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

编辑：

为了澄清，为了让答案对我有效，它需要处理一个不可滚动的元素。我有一个页面，它根本不滚动，但它有其他事件触发时，用户滚动。这意味着我不能使用基于窗口滚动位置(如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或最大值时触发鼠标轮和触摸事件。

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

 transition: transform3d( 0, YOURSCROLLVALUE , 0);

Answer 2

一个可能的解决方案是使用插件来滚动，例如

艾克洛尔

在这里的示例中：

示例

他们使用特性拉刷新，这将在达到最大的滚动可用，在这里，您可以使用任何自定义函数(即使您的项目是不可滚动的)。