有沒有一種可靠的方法來檢測所有設備上的滾動，使用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

在這個例子中：

例

他們使用功能拉動刷新，在達到可用的最大滾動時將觸發，此處您可以使用任何自定義功能（即使您的項目不可滾動）。