2012-01-20 3 views
5

내 궁극적 인 목적은 내 페이지에서 가로로 기본으로 (-webkit-overflow-scrolling: touch 사용) 스크롤하는 인라인 div를 사용하는 것입니다.중첩 된 요소 내에서 iOS Safari onscroll 이벤트

나는 ontouchend 이벤트에 액세스 할 수 있기 때문에이-webkit-overflow-scrolling없이 을 달성 할 수있다, 그래서이 기능을위한 최적의 UX를 달성하기 위해, 그러나 일어날 때 내 스냅을 계산할 수있다, 나는 네이티브 같은를 사용하려면 이 요소를 스크롤합니다.

손가락을 찍은 후 영화/약간의 힘을 사용하여 DIV 조금 에 대한 스크롤 계속된다 -webkit-오버 플로우 스크롤을 사용의 문제 (즉 ontouchend 해고 한 후); 이것은 스크롤이 끝나기 전에 내 스냅이 계산된다는 의미입니다.

길 찾기에 많은 시간을 할애했지만 아직 성공하지 못했습니다.

페이지 전체 컨텍스트에서 이 완료되면으로 스크롤 될 때 사파리가 onscroll 이벤트를 발생시킵니다. 제 질문은,이 이벤트가 가능하다는 것입니다 요소 컨텍스트 내에서? 즉 <div id="slideShow"> 안에 내비게이션 화재가 발생 했습니까? 그렇지 않으면

, 그것은 할 수 있습니다 중 하나

(A) 예를 들어 ontouchmove의 액세스 속도 때문에 스냅을 실행할 때 계산할 수 있을까?

또는

(b) -webkit 오버플 스크롤 에뮬레이트 : 터치 (탄성 및 속도 효과).

참고 : 예를 들어 iPad w/iOS5를 사용합니다.

답변

2

scroll 이벤트는 스크롤하는 모든 컨테이너에서 개별적으로 실행되며 iOS에서는 스크롤이 중지되고 완료된 후에 만 ​​실행됩니다. 컨테이너에서 스크롤 이벤트를 수신 할 수 있습니다. 당신이 밖으로 div에 스크롤되어하지 않을 경우, 수평 텍스트를 스크롤 할 때 당신은 경고 만 볼 수

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Test Touch Scrolling</title> 
     <style> 
      body { 
       font-size: 15em; 
      } 
      #outer { 
       height: 1200px; 
       width: 300px; 
       overflow-x: scroll; 
       -webkit-overflow-scrolling: touch; 
      } 
      #inner { 
       width: 600px; 
      } 
     </style> 
     <script> 
      document.addEventListener("DOMContentLoaded", function() { 
       var list = document.getElementById("outer"); 
       list.addEventListener("scroll", function(event) { 
        alert("Scroll has ended for element with ID '" + event.currentTarget.id + "'"); 
       });    
      }, false); 
     </script> 
    </head> 
    <body> 
     <div id="outer"> 
      <div id="inner">Some text. And more.</div> 
     </div> 
    </body> 
</html> 

: 여기

은 예입니다.

+0

우수; 하지만 스크롤하는 동안 이벤트가 많은 시간을 끌 수있는 이유를 알고 있습니까? 귀하의 예제가 작동하지만 더 복잡한 구현 (더 복잡한 마크 업, CSS)에서는 이벤트가 계속 스크롤됩니다. – sgb

+0

업데이트 : 스크롤을 여러 번 발생시킨 터치 이벤트에 바인딩 된 일부 마우스 이벤트가있었습니다. 내 잘못, 도와 줘서 고마워. – sgb