1

我#Accordion在 div( .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

1

所以我找到了答案

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

样式=“溢出：自动；-webkit-溢出-滚动：触摸”

<div class='desktop_summary_column_div' style="overflow: auto; -webkit-overflow-scrolling: touch">
于 2013-10-21T12:30:31.933 回答