2012-04-15 1 views
1

Overthrow 플러그인을 사용하려고합니다. 모바일 장치의 overflow : auto에 대한 polyfill입니다. 샘플 here.

내 질문 :
어떻게 스크롤하는 div.element에 scrollstart/scrollstop을 감지 할 수 있습니까? 이것이 가능합니까 아니면 scroll/scrollstart/scrollstop 이벤트가 $ (document)에서만 작동합니까? 일부 입력에 대한

$(document).on('scrollstart','div:jqmData(panel="main"), div:jqmData(panel="menu")'), function() { 
    console.log("scroll detected"); 
    }); 

감사 : 나는 모두 스크롤 할 수 있습니다 내 페이지에 두 개의 패널이있는 경우

특히,이 일을 할 수있는 방법이있다!

편집 :
내 HTML은 다음과 같습니다

<html class="ui-popover-mode"> 
// OR depending on screen size 
<html class="ui-splitview-mode"> 
    // panel 1 
    <div data-panel="main" class="ui-panel"> 
     <div data-role="page" class="ui-page" id="mainOne"> 
      <div data-role="content" class="ui-content"></div> 
     </div> 
     <div data-role="page" class="ui-page" id="mainTwo"> 
      <div data-role="content" class="ui-content"></div> 
     </div> 
    </div> 
    // panel 2 
    <div data-panel="menu" class="ui-panel"> 
     <div data-role="page" class="ui-page" id="menuOne"> 
      <div data-role="content" class="ui-content"></div> 
     </div> 
     <div data-role="page" class="ui-page" id="menuTwo"> 
      <div data-role="content" class="ui-content"></div> 
     </div> 
    </div> 
    // panel 3 
    <div data-panel="pop" class="ui-panel"> 
     <div data-role="page" class="ui-page" id="popOne"> 
      <div data-role="content" class="ui-content"></div> 
     </div> 
     <div data-role="page" class="ui-page" id="popTwo"> 
      <div data-role="content" class="ui-content"></div> 
     </div> 
    </div> 
</html> 

화면 모드는 화면의 크기에 따라 설정됩니다. 모든 패널에는 여러 페이지가있을 수 있으며 각 페이지에는 전복을 사용하여 스크롤 할 수있는 콘텐츠 섹션이 있습니다.

나는 팝 오버 모드splitview 모드 및 메인 컨텐츠 섹션 메인 메뉴 콘텐츠 섹션에서 scrollstart에 바인딩합니다.

$(document).on('scrollstart','.ui-splitview-mode div:jqmData(panel="main") .ui-content, .ui-splitview-mode div:jqmData(panel="menu") .ui-content, .ui-popover-mode div:jqmData(panel="main") .ui-content, ', function() { 
     // do sth 
    }); 

이이 복잡 합의 작동하지 않았다

원래 내 선택이 캡처 만 관련 콘텐츠 요소에 첨부했습니다. 그러나 그것은 필요한 요소에만 이벤트를 첨부했습니다. 지금은이 같은 일을 해요 : 이벤트가 I 만에 이벤트를 첨부 할 다른 방법 대 감지 된 후

$('.ui-content').on('scrollstart', function() { 
     // check here if .ui-content is on the correct panel 
    }); 

그래서 지금은 불필요한 바인딩을 많이 가지고 바인딩 경우에만 확인하는 것은 정확 필수 요소. 궁금 무엇

.

답변

1

직접 요소를 선택하고 스크롤 이벤트를 첨부 할 수 있습니다. 간단한 예

$("#selector").on('scrollstart', function() { 
    //...do stuff 
}); 
+0

ok. 이 시도는 – frequent

+0

이상합니다. 내가 직접 요소를 대상으로 할 때 작동,하지만 $ 같은 더 복잡한 선택 ('. 모드 #selector') – frequent

+0

@frequent, 당신이 문서에 첨부하려고하는 이벤트 위임을 구성하지 않을 경우,이 모호함을 일으킬 수 있습니다. – Starx

관련 문제