在电话中使用iframe滚动iOS
问题描述:
如果在PhoneGap应用程序中有iframe。该框架已被赋予1000的高度。通过将其宽度调整为50%,我可以通过触摸框架旁边的空间上的父项进行滚动。但是当我尝试通过触摸框架本身进行滚动时,没有任何反应。在电话中使用iframe滚动iOS
我查找了这个问题,并且报告了一些包含-webkit-overflow-scrolling:touch的解决方案的问题。但没有运气。
#content_wrap {
display: inline-block;
float:left;
width:100%;
overflow-x:hidden;
position:relative;
height:auto;
z-index:300;
}
#content_wrap .content_container {
position:absolute;
left:0px;
display:inline-block;
float:left;
width:100%;
padding:0;
min-height:100%;
height:auto;
background-color:#FFF;
}
#tickets {
display:inline-block;
float:left;
width:50%;
margin:0px;
height:auto;
}
#ticketFrame {
height:1000px;
display:inline-block;
float:left;
width:100%;
}
的HTML:
<div id="content_wrap">
<div class="content_container">
<div id="tickets">
<iframe src="someurl" frameborder="0" id="ticketFrame"></iframe>
</div>
</div>
</div>
我使用内嵌式地显示块和左浮动就像你看到的粉丝;)
怎么做才能够在触摸屏滚动PhoneGap的?
答
也许问题是你的iframe标签? </iframe">
如果没有,请添加/更改您的CSS并再试一次。
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
#content_wrap {
display: inline-block;
float:left;
width:100%;
overflow-x:hidden;
position:relative;
height:100%;
z-index:300;
}
#content_wrap .content_container {
position:absolute;
left:0px;
display:inline-block;
float:left;
width:100%;
padding:0;
min-height:100%;
height:auto;
background-color:#FFF;
}
#tickets {
display:inline-block;
float:left;
width:50%;
margin:0px;
height:100%;
right: 0;
bottom: 0;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
#ticketFrame {
height:1000px;
display:inline-block;
float:left;
width:100%;
}
iframe中内容的高度是否大于1000px?如果不是,将不会滚动。你有没有尝试将iframe的高度设置为100%? –
@DawsonLoudon thx,只是试过,但没有,不工作..仍然不滚动。虽然如果它是一个1000像素,它超出了手机屏幕的高度,所以它应该仍然是滚动。也许不是框架本身,但肯定父母应该对吗?就像我说的,我可以滚动,当我触摸父母的侧面(避免帧) – Mart
你累了1000px与'滚动=“否”'在iframe上。有时你必须禁用一个元素的滚动来获得父元素的滚动 –