始終跟蹤滾動使用jQuery

使用下面的代碼：始終跟蹤滾動使用jQuery

(function($){ 
    $(window).on('scroll', function(){ 
     var scroll_top = $(document).scrollTop(); 

     if (scroll_top > 50 && scroll_top < 100) { 
      console.log(scroll_top); 
     } 
    }); 
})(jQuery)

查看控制檯顯示我50 & 100之間的數字範圍，而我向上和向下滾動，符合市場預期。

但是，我需要一種方法來記錄50 & 100之間的每一個數字，因爲我已經滾動。所以，如果我停在55那就登錄51，52，53，54，55

我明白，這是因爲瀏覽器運行JavaScript和渲染速度不同的頁面，但它是在所有可能的？

來源

2016-03-02 evu

不，這是不可能的，因爲你提到的原因;瀏覽器都以不同的速度運行JS事件，這取決於所使用的硬件。由於事件只在UI的每次重繪時引發，因此無法讓每個像素滾動，但是如果您跟蹤上一個事件的值以及現在的情況，則可以推斷方向和數量像素已經滾動。 –

「據我所知，這是因爲瀏覽器運行JavaScript並以不同的速度渲染頁面」：不，這主要是因爲當您打開鼠標滾輪時，它會以間隔發生，而不是連續發生。 – Prinzhorn

如果你想記錄所有數字，只需使用for循環。 – Prinzhorn

var scroll_pos_at_mousedown; 
var aa = function(){ 

    $(window).on('scroll mouseup mousedown', function(e){ 
     var scroll_top = $(document).scrollTop(); 


     if(e.type == 'mousedown') { 

      var scroll_top1 = $(document).scrollTop(); 
      if(scroll_top1 <= 50) { 
       scroll_pos_at_mousedown = 50; 
      } else if(scroll_top1 > 50 || scroll_top1 <= 500) { 
       scroll_pos_at_mousedown = scroll_top1; 
      } else { 
       scroll_pos_at_mousedown = 500; 
      } 
      console.log("scroll_top is "+scroll_top1); 
     } 

     console.log("current_scroll_top is " + scroll_pos_at_mousedown); 


     if (scroll_top > 50 && scroll_top < 500) { 
      if(e.type == "mouseup") { 
       var scroll_pos_at_mouseup = $(document).scrollTop(); 
       console.log('scroll_pos_at_mouseup is '+scroll_pos_at_mouseup); 
       if(scroll_pos_at_mousedown<=500) { 
        for(i=scroll_pos_at_mousedown;i<=scroll_pos_at_mouseup;i++) 
         console.log(i); 
       }else { 
        for(i=scroll_pos_at_mouseup;i<=500;i++) 
         console.log(i); 
       } 
      } 


     } 
    }); 
};aa();

我已經寫了這個函數記住事件mousedown和mouseup。您還可以添加keyup和keydown事件，並將其添加到上下箭頭keyCode中。希望這有助於:)

來源

2016-03-02 19:16:20 abhiagNitk

始終跟蹤滾動使用jQuery

回答

相關問題