jQuery滾動事件：如何確定以像素為單位滾動的數量（滾動增量）？

Question

我有這個事件：

$(window).scroll(function(e){    
    console.log(e);
})

我想知道，我有多少像素滾動值，因為我認為，滾動值取決於窗口大小和屏幕分辨率。

功能參數e不包含此信息。
我可以在每次滾動后存儲$(window).scrollTop()並計算差異，但我可以采用不同的方式嗎？

Answer 1

“滾動值”不依賴於窗口大小或屏幕分辨率。 “滾動值”只是滾動的像素數。

但是，您是否能夠滾動，並且您可以滾動的數量取決於容器的可用空間和容器內容的大小（在這種情況下，容器是document.documentElement ，或document.body對於舊瀏覽器）。

scroll事件不包含此信息，這是正確的。 它不提供delta屬性來指示滾動的像素數。 這適用於本機scroll事件和jQuery scroll事件。 這似乎是一個有用的功能，類似於mousewheel事件如何為X和Y delta提供屬性。

我不知道，也不會推測，為什么權力沒有為scroll提供delta屬性，但這超出了這個問題的范圍（隨意發布一個單獨的問題）。

您將scrollTop存儲在變量中並將其與當前scrollTop進行比較的方法是我找到的最好（也是唯一）方法。 但是，根據本文，您可以通過擴展jQuery來提供新的自定義事件來簡化此操作： http ： //learn.jquery.com/events/event-extensions/

這是我創建的一個示例擴展，用於窗口/文檔滾動。 它是一個名為scrolldelta的自定義事件，可自動跟蹤X和Y delta（分別為scrollLeftDelta和scrollTopDelta ）。 我沒有嘗試過其他元素; 將此作為練習給讀者。 這適用於Chrome和Firefox的當前版本。 它使用了獲取document.documentElement.scrollTop和document.body.scrollTop之和的技巧來處理Chrome更新body.scrollTop而不是documentElement.scrollTop的錯誤（IE和FF更新documentElement.scrollTop ;請參閱https：// code .google.com / p / chromium / issues / detail？id = 2891 ）。

JSFiddle演示： http ： //jsfiddle.net/tew9zxc1/

Runnable Snippet（向下滾動並單擊Run code snippet ）：

 // custom 'scrolldelta' event extends 'scroll' event jQuery.event.special.scrolldelta = { delegateType: "scroll", bindType: "scroll", handle: function (event) { var handleObj = event.handleObj; var targetData = jQuery.data(event.target); var ret = null; var elem = event.target; var isDoc = elem === document; var oldTop = targetData.top || 0; var oldLeft = targetData.left || 0; targetData.top = isDoc ? elem.documentElement.scrollTop + elem.body.scrollTop : elem.scrollTop; targetData.left = isDoc ? elem.documentElement.scrollLeft + elem.body.scrollLeft : elem.scrollLeft; event.scrollTopDelta = targetData.top - oldTop; event.scrollTop = targetData.top; event.scrollLeftDelta = targetData.left - oldLeft; event.scrollLeft = targetData.left; event.type = handleObj.origType; ret = handleObj.handler.apply(this, arguments); event.type = handleObj.type; return ret; } }; // bind to custom 'scrolldelta' event $(window).on('scrolldelta', function (e) { var top = e.scrollTop; var topDelta = e.scrollTopDelta; var left = e.scrollLeft; var leftDelta = e.scrollLeftDelta; // do stuff with the above info; for now just display it to user var feedbackText = 'scrollTop: ' + top.toString() + 'px (' + (topDelta >= 0 ? '+' : '') + topDelta.toString() + 'px), scrollLeft: ' + left.toString() + 'px (' + (leftDelta >= 0 ? '+' : '') + leftDelta.toString() + 'px)'; document.getElementById('feedback').innerHTML = feedbackText; }); 

 #content { /* make window tall enough for vertical scroll */ height: 2000px; /* make window wide enough for horizontal scroll */ width: 2000px; /* visualization of scrollable content */ background-color: blue; } #feedback { border:2px solid red; padding: 4px; color: black; position: fixed; top: 0; height: 20px; background-color: #fff; font-family:'Segoe UI', 'Arial'; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='feedback'>scrollTop: 0px, scrollLeft: 0px</div> <div id='content'></div> 

請注意，您可能需要根據您的操作去除事件。 你沒有在你的問題中提供太多的上下文，但如果你給出一個更好的例子來說明你實際使用這些信息，我們可以提供更好的答案。 （請顯示更多代碼，以及如何使用“滾動值”）。

Answer 2

要確定滾動了多少像素，您必須記住， scroll事件幾乎會觸發您移動的每個像素。 完成它的方法是保存先前的滾動值並在超時中進行比較。 像這樣：

var scrollValue = 0;
var scrollTimeout = false

$(window).scroll(function(event){
    /* Clear it so the function only triggers when scroll events have stopped firing*/
    clearTimeout(scrollTimeout);
    /* Set it so it fires after a second, but gets cleared after a new triggered event*/
    scrollTimeout = setTimeout(function(){
        var scrolled = $(document).scrollTop() - scrollValue;
        scrollValue = $(document).scrollTop();
        alert("The value scrolled was " + scrolled);
    }, 1000);
});

通過這種方式，您可以在滾動后獲得滾動一秒的數量（這是可調整的，但您必須記住，今天如此流行的平滑滾動有一些用完的時間，而您不希望在完全停止之前觸發） 。

Answer 3

另一種方法呢？ 是的，可能，使用jQuery Mobile
我不欣賞這個解決方案，因為有必要包含大量的jQuery mobile。 解：

var diff, top = 0;
$(document).on("scrollstart",function () {
  // event fired when scrolling is started
  top = $(window).scrollTop();
});
$(document).on("scrollstop",function () {
  // event fired when scrolling is stopped
  diff = Math.abs($(window).scrollTop() - top);
});

Answer 4

通過向Jquery滾動方法添加計時器來降低使用的處理能力可能不是一個好主意。 視覺效果確實非常糟糕。

通過在滾動開始時隱藏滾動元素並使其在一段時間后滑入（在正確的位置），可以使整個Web瀏覽體驗更好。 滾動甚至也可以延遲檢查。 此解決方案效果很好。

$(document).ready(function() {

    var element = $('.movable_div'),
    originalY = element.offset().top;
    element.css('position', 'relative');

    $(window).on('scroll', function(event) {
        var scrollTop = $(window).scrollTop();
        element.hide();
        element.stop(false, false).animate({
            top: scrollTop < originalY
                    ? 0
                    : scrollTop - originalY + 35
        }, 2000,function(){element.slideDown(500,"swing");});
    });
});

現場演示在這里