1

Overthrow Pluginを使用しようとしています。これは、モバイル デバイスの overflow:auto のポリフィルです。サンプルはこちら。

私の質問:
スクロール可能なスクロール スタート/スクロールストップを検出するにはどうすればよいdiv.elementですか? これはまったく可能ですか、それとも scroll/scrollstart/scrollstop イベントのみが機能し$(document)ますか?

具体的には、ページに 2 つのパネルがあり、どちらもスクロール可能である場合、これを機能させる方法はありますか。

 $(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 -mode のメインおよびメニュー コンテンツ セクションでスクロールスタートにバインドし、 popover-mode のメイン コンテンツ セクションにバインドします。

当初、私のセレクターはこれをキャプチャして、関連するコンテンツ要素にのみアタッチしようとしました:

$(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
    });

これは複雑で、うまくいかないことに同意しました。ただし、必要な要素にのみイベントを添付しました。今、私はこのようにやっています：

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

そのため、不要なバインディングがたくさんあり、イベントが検出された後にバインディングが正しいかどうかのみを確認し、他の方法では必要な要素にイベントを添付するだけです。

それが私が疑問に思っていたことです。

4

1 に答える 1

1

You can directly select the element and attach the scroll event. Simple example

$("#selector").on('scrollstart', function() {
    //...do stuff
});
于 2012-04-15T10:58:23.710 に答える