2017-10-26 8 views
0

사용자가 이미 맨 위에 있고 더 위로 스크롤하려는 경우 작업을 시작하려고합니다.스크롤 이벤트가 이미 위에있는 동안 감지 (모바일)

일반 컴퓨터의 휠 이벤트를 사용하여 관리했지만 그 기능은 휴대폰에서는 작동하지 않습니다. 그것을 추적 할 수있는 방법이 있습니까?

js fiddle

JS

$ = jQuery; 
$(document).ready(function() { 
    $('.foo').bind('mousewheel', function(e) { 
    if (e.originalEvent.wheelDelta/120 > 0 && document.documentElement.scrollTop === 0) { 
      console.log('OBOVE THE TOP') 
    } 
    }); 
}); 

CSS

.foo { 
    height: 4000px; 
    background-color: green; 
} 

HTML

대신 마우스 휠을 사용하면 뷰포트를 감지 scrollTop을 사용할 수
<div class="foo"> 

</div> 
+0

나는 당신이 [터치 이벤트]로 검색하는 기능을 얻을 수 있습니다 생각 (https://developer.mozilla.org/en-US/docs/Web/API/Touch_events) – 3Dos

답변

0

페이지의 위치.

행운을 빈다.

<html> 
    <head> 
     <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
     <style> 
     body{ 
      height: 5000px; 
     } 
     </style> 
    </head> 
    <body> 
     Hi! 
     <script> 
     jQuery(window).on('scroll' , function(){ 
      var height = $(this).scrollTop(); 
      if(height < 0){ 
       console.log('ABOVE THE TOP'); 
      } 
      if(height > 0){ 
       console.log('Below THE TOP'); 
      } 
      if(height == 0){ 
       console.log('At the top'); 
      } 
     }); 
     </script> 
    </body> 
</html> 
+0

건에 대해 즉 스크롤 탑이 문서 상단 위로 결코 올라 가지 않기 때문에 첫 번째는 절대 실행되지 않습니다. 사실 스크롤 이벤트는 U가 이미 위에있는 경우에도 실행되지 않습니다. 여기에 코드가 있습니다. https://jsfiddle.net/65ot28p4/ – Trip1

+0

오케이 ... 그럼 jQuery-mobile을 사용하고 모바일에 이미있는 코드를 실행 해보십시오. https://css-tricks.com/forums/topic/triggering-a-wheel-event-on-mobile/ –