iPad 在 Jquery 手风琴上滚动答案

【问题标题】：iPad scroling on a Jquery accordioniPad 在 Jquery 手风琴上滚动
【发布时间】：2013-10-21 20:30:31
【问题描述】：

我在 div(.summary_wrapper) 内部有一个 (#Accordion)，在一个 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;
}

对不起，我知道它的负担很重... 但也许这对一些能够提供帮助的人来说是有意义的。

【问题讨论】：

标签： jquery html css

【解决方案1】：

所以我找到了答案

将以下样式添加到包含 iFrame 的 DIV。

style="overflow: auto;-webkit-overflow-scrolling: touch"

<div class='desktop_summary_column_div' style="overflow: auto; -webkit-overflow-scrolling: touch">

【讨论】：