iframe滚动iOS 8

Adr*_*ica 40 iframe scroll overflow ios8

我有一个iframe,我需要它有一个滚动溢出.它似乎在桌面上工作,我使用了一个解决方案,使其在iOS中工作.它现在适用于Android和iOS.但是,iOS8失败了.

    <html>
    <body>
    <style type="text/css">
      .scroll-container {
       overflow: scroll;
       -webkit-overflow-scrolling: touch;
      }
     #iframe_survey {
      height: 100%;
     }

    .scroll-container {
     height: 100%;
     width: 100%;
     overflow: scroll;
     }
   </style>

   <div class="scroll-container scroll-ios">
   <iframe id="iframe_survey" src="www.iframe.com" style="border:0px #FFFFFF none;" name="myiFrame" frameborder="0" marginheight="0px" marginwidth="0px" width="100%"></iframe>
   </div>
   </body>
Run Code Online (Sandbox Code Playgroud)

Usm*_*aja 36

以这种方式使用代码

<div style="overflow:auto;-webkit-overflow-scrolling:touch">
    <iframe style="width:100%;height:600px" src="www.iframe.com"></iframe>
</div>
Run Code Online (Sandbox Code Playgroud)

  • 这对iOS 8不起作用 (9认同)

小智 34

为了在iOS上使iframe可滚动,您必须将CSS3属性添加-webkit-overflow-scrolling: touch到父容器:

<div style="overflow:auto;-webkit-overflow-scrolling:touch">
  <iframe src="./yxz" style="width:100%;height:100%">
</div>
Run Code Online (Sandbox Code Playgroud)

  • 这显然应该是公认的答案 (3认同)

小智 6

经过数小时测试后,我终于让我的工作了.基本上对我有用的是这个(显示为内联样式演示).使外部div溢出自动使其不会在桌面上显示一组额外的滚动条.

<div style="overflow: auto!important; -webkit-overflow-scrolling: touch!important;"> 
   <iframe src="http://www.mywebsiteurl.com" style="width: 100%; height: 600px; display: block; overflow: scroll; -webkit-overflow-scrolling: touch;" ></iframe>
</div>
Run Code Online (Sandbox Code Playgroud)


小智 0

不知道“www.iframe.com”的另一端是什么......但对我来说,在该文件的 css 中我添加了:

body {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}
Run Code Online (Sandbox Code Playgroud)

这解决了它。