javascript - 有没有一种可靠的方法可以使用 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 大多数用法，然后创建一个新的监听器来专门处理顶部和底部滚动条件我建议使用 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;

}

无法检测滚动条事件，请将其与当前代码结合起来，并且仅在滚动位置为 0 或最大值时触发鼠标滚轮和触摸事件。

顺便说一句，如果您试图完全摆脱滚动条，这是一个非常糟糕的主意，因为它既是用户的绝佳工具，也是用户界面的标准部分。如果您尝试制作可滚动的全页应用程序并且不想要滚动条，请尝试使用幻灯片。无论哪种方式，都不要继续设置缓慢的滚动值，而是使用 css 移动整个主体:

 transition: transform3d( 0, YOURSCROLLVALUE , 0);