iPad在Jquery手风琴上摇曳
我在一个div（iPad在Jquery手风琴上摇曳,jquery,html,css,Jquery,Html,Css,我在一个div（.summary\u wrapper）中有一个（.desktopIframe）在一个div（.desktop\u summary\u column\u div）中的iFrame（.desktop\u summary\u column\u div）中有一个（。折叠的手风琴的高度不高于div（.summary\u wrapper）。如果我展开一个手风琴项目，它将展开超过div的底部（.summary\u wrapper）（这也是ipad屏幕的底部）。如果我想向下滚动，ipad想移动/
.summary\u wrapper.desktopIframe.desktop\u summary\u column\u div.desktop\u summary\u column\u div）中有一个（。折叠的手风琴的高度不高于div（.summary\u wrapper
）。如果我展开一个手风琴项目，它将展开超过div的底部（.summary\u 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>
对不起，我知道有很多。。。
但也许这对一些能够提供帮助的人来说是有意义的 所以我找到了答案
将以下样式添加到包含iFrame的DIV中
style=“溢出：自动；-webkit溢出滚动：触摸”
所以我找到了答案
将以下样式添加到包含iFrame的DIV中
style=“溢出：自动；-webkit溢出滚动：触摸”
.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;
}
<div class='desktop_summary_column_div' style="overflow: auto; -webkit-overflow-scrolling: touch">