在 phonegap iOS 中使用 iframe 滚动

Question

如果我的 PhoneGap 应用中有 iframe。框架的高度为 1000。 通过将其宽度调整为 50%，我可以通过触摸框架旁边空间上的父级来滚动。但是当我尝试通过触摸框架本身来滚动时，没有任何反应。

我查找了这个问题，并报告了一些问题，这些问题与包括 -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 中使用触摸屏滚动？

Answer 1

也许问题是你的 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%;
}