2011-11-21 2 views
1

안녕하세요, 이벤트를 트리거하기 전에 사용자가 웹 페이지 (실시간)를 스크롤 한 픽셀 수를 감지하는 방법을 찾고 있습니다.스크롤 가능한 픽셀 추적

나는이 코드를 보았습니다. 그 코드는 제가 선택한 것입니다. 그러나 div가 아닌 전체 페이지를 수집해야합니다. 이 아이 패드/아이폰 등

<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/에서 찾을 수 있습니다 후있어 무엇의 예에 스크롤 할 필요가 있기 때문에 전체 페이지의 크기에 DIV를 확대 할 수없는 어떤 도움이 될 것입니다 매우 감사.

편집 : 페이지 하단에 있습니다!

답변

1

jQuery에서 살펴볼 내용은 scroll() 이벤트와 scrollTop() 메서드입니다. 이 값을 사용하여 사용자가 스크롤 한 페이지의 깊이를 확인하고 값에 따라 필요한 내용을 표시하거나 숨길 수 있습니다.

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

또한이 경우에 같은 indiviual overflow: scroll 그들에게 적용된 요소뿐만 아니라 window 객체에이 방법을 적용 할 수 있습니다.

Here's a fiddle to see it in action