可滾動像素跟蹤

嗨我正在尋找一種方式來檢測用戶在觸發事件之前已經向下滾動網頁（實時）的像素數。可滾動像素跟蹤

我遇到過這種代碼，這是我以後的事情的類型，但是我需要收集整個頁面而不是一個div。我不能放大DIV整個頁面的大小，因爲它需要用於iPad/iPhone手機等

<head> 
    <script type="text/javascript"> 
     function OnScrollDiv (div) { 
      var info = document.getElementById ("info"); 
      info.innerHTML = "Horizontal: " + div.scrollLeft 
          + "px<br/>Vertical: " + div.scrollTop + "px"; 
     } 
    </script> 
</head> 
<body> 
    <div style="width:100px;height:200px; overflow:auto;" onscroll="OnScrollDiv (this)"> 
     Please scroll this field! 
     <div style="height:300px; width:100px; background-color:#ccc;"></div> 
     Please scroll this field! 
     <div style="height:300px; width:100px; background-color:#ccc;"></div> 
     Please scroll this field! 
    </div> 
    <br /><br /> 
    Current scroll amounts: 
    <div id="info"></div> 
</body>

什麼，我可以在http://www.nikebetterworld.com/找到後我一個例子滾動任何幫助將是非常感激。

編輯：它位於頁面的底部！

來源

2011-11-21 user1058185

你需要在jQuery中尋找的是scroll()事件，再加上scrollTop()方法。您可以使用這些來發現用戶滾動頁面的距離，並根據所需值顯示或隱藏內容。

$(window).scroll(function() { 
    var currentPosition = $(this).scrollTop(); 
    // do something with currentPosition... 
});

還可以將該方法應用於具有應用於它們overflow: scroll indiviual元素，以及作爲window對象，如在這種情況下。

Here's a fiddle to see it in action

來源

2011-11-21 16:51:45

可滾動像素跟蹤

回答

相關問題