1

#Accordiondiv( ).summary_wrapper内の iFrame( desktopIframe) 内にdiv( ) 内に ( ) があり.desktop_summary_column_divます。折りたたまれたアコーディオンの高さは、div( ) より高くありません.summary_wrapper。アコーディオン項目を展開すると、div( .summary_wrapper) の下部 (iPad 画面の下部でもあります) を超えて展開されます。下にスクロールしたい場合、iPadは画面全体を移動/スクロールしたいと考えています。これは、含まれている div が指のドラッグで移動することを意味します。したがって、これにより、アコーディオンのスクロールが役に立たなくなります。

iPadのdiv内でスクロールできるようにアコーディオンをセットアップする方法はありますか?

これが私のアコーディオンのセットアップです。

      $(function() {
    $( "#accordion" ).accordion({ 
        heightStyle: "content",
        collapsible: true, 
        active: false,
        // autoheight: true,
        animated: 'easeslide'
    });


    var is_touch_device = 'ontouchstart' in document.documentElement;
    if(is_touch_device) {
        $(this).addClass('panel');
        $(this).addClass('overflow');
    }
  });

含まれる要素の例を次に示します。

<td class="desktop_summary_column">
<div class="desktop_summary_column_div" style="display: block;">
    <iframe id="desktopIframe" name="desktopIframe" width="100%" height="99%" frameborder="0"></iframe>
    ..........
        <body>
            <div class="overview_wrapper"> 
                <div class="summary_wrapper">
                    <div id="accordion" class="ui-accordion ui-widget ui-helper-reset" role="tablist">
                        <div class='desktop_summary_text'>                          
                            ...ACCORDION ITEM with sub items...
                        </div>
                        <div class='desktop_summary_text'>                          
                            ...ACCORDION ITEM with sub items...
                        </div>
                        <div class='desktop_summary_text'>                          
                            ...ACCORDION ITEM with sub items...
                        </div>
                    </div>
                </div>
            </div>
        </body>
    ..........
</div>

.desktop_summary_textアコーディオンの一番内側のクラスでは、次のスタイルを設定しています。

.panel
{
    width: 100%;
    max-height: 300px; /* fixed height of div */  
    -webkit-overflow-scrolling: touch; /* allow touch scrolling in webkit browsers */
 }           

.panel > * {
    -webkit-transform: translateZ(0px);
}


.overflow {
    /*overflow: scroll;*/  /*set overflow to scroll for desktop browsers*/ 
    /*overflow-x: hidden; */
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translate3d(0,0,0);
}

.accordion{
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

申し訳ありませんが、かなりの負荷がかかっていることは承知しています...しかし、助けてくれる数人にとっては理にかなっているかもしれません。

4

1 に答える 1