iframe滚动iOS 8
我有一个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>
以这种方式使用代码
<div style="overflow:auto;-webkit-overflow-scrolling:touch"> <iframe style="width:100%;height:600px" src="www.iframe.com"></iframe> </div>
为了使iOS上的iframe可以滚动，您必须将CSS3属性-webkit-overflow-scrolling: touch到父容器中：
<div style="overflow:auto;-webkit-overflow-scrolling:touch"> <iframe src="./yxz" style="width:100%;height:100%"> </div>
经过数小时的testing，我终于得到了我的工作。 基本上是什么对我来说是这样的（显示为内联样式演示）。 使外部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>
在iOS 8中有一个错误，当-webkit-overflow-scrolling：touch已经被应用到溢出的任何东西的时候，它们都会一起中断滚动。
看看我几周前发布的问题： -webkit-overflow-scrolling：touch; 在苹果的iOS8中rest
它不适合我！ 但是在阅读这篇文章之后，我可以弄清楚一些小技巧： https : //css-tricks.com/forums/topic/scrolling-iframe-on-ipad/
只要把一个！重要的，工作就好了！
-webkit-overflow-scrolling: touch !important; overflow-y: scroll !important;
不知道什么是“www.iframe.com”的另一端…但对我来说，在该文件的CSS我补充说：
body { position: relative; z-index: 1; width: 100%; height: 100%; }
这固定它。
您必须使用身体风格或溢出：滚动;
或者也可以使用
<div style="width:100%;height:600px;overflow:auto;-webkit-overflow-scrolling:touch"> <iframe style="overflow:scroll;" src="www.iframe.com"></iframe> </div>
我能够在iOS中通过放置一个iframe内部的div （作为容器）和应用样式如下，这完美的作品在iframe滚动。
.iframe { overflow: scroll !important; width: 100%; height: 100%; border: none; } .div { overflow: hidden; width: 100%; height: 100%; border: none; background-color: #FFF; }
因为我在GWT工作，对于GWT人来说，这是build议。 在GWT的情况下，只需在ScrollPanel（div）中放置一个iframe并应用上面的样式。
必须定义您的scroll-container fixed为div是全屏尺寸。 然后在iframe中创build一个主要的内容谁有一个属性滚动。
在你的iframe里面，在mainContainer-scroll ，你可以添加：
-
-webkit-overflow-scrolling: touch//用于主动平滑滚动 -
-webkit-transform: translate3d(0, 0, 0)//用于材质加速 -
overflow-y:scroll;//用于在y轴上添加滚动 -
position:absolute;height:100%;width:100%;top:0;left:0;//用于修复容器
主页
<html> <head> <style type="text/css"> #iframe_survey { height: 100%; } .scroll-container { height: 100%; width: 100%; position:fixed; } </style> </head> <body> <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> </html>
里面的iframe
<div class="mainContainer-scroll" style="position:absolute;height:100%;width:100%;top:0;left:0;-webkit-overflow-scrolling: touch;-webkit-transform: translate3d(0, 0, 0);overflow-y:scroll;"> <div class="Content" style="height:2000px;width:100%;background:blue;"> </div> </div>
