Iframe滚动iOS 8

我有一个iframe，我需要它有一个滚动溢出。它似乎在桌面上工作，我用了一个工作，使其在iOS中工作。它现在适用于Android和iOS。然而，iOS8却失败了。Iframe滚动iOS 8

<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>

来源

2014-09-25 Adrian Mojica

有同样的问题，在iOS8上乱七八糟的东西真的不好 – 2014-09-26 09:24:45

难道Safari或一个UIWebView的应用程序？ – 2014-09-26 13:03:29

Safari8 for iOS8 @ReigoHein – 2014-09-26 14:06:13

不知道什么是对的 “www.iframe.com” 的另一端......但对我来说，在该文件中的CSS我说：

body { 
    position: relative; 
    z-index: 1; 
    width: 100%; 
    height: 100%; 
}

该固定它。

来源

2014-10-01 21:15:51

是的，能解决它，如果你有机会获得iframe CSS。如果你不。仍然没有答案。 – 2014-10-01 21:17:25

使用代码以这种方式

<div style="overflow:auto;-webkit-overflow-scrolling:touch"> 
    <iframe style="width:100%;height:600px" src="www.iframe.com"></iframe> 
</div>

来源

2014-10-04 02:56:30

这是更好的解决方案，对我来说它在ios8中工作，但iframe高度大于身高时可能会出现渲染问题。看到这里更详细的解释：http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/ – Miquel 2014-10-04 09:30:02

基本的区别是使用'溢出：auto'而不是'overflow：scroll'？这不适合我。 – althaus 2014-10-15 09:46:09

这对我来说不适用于iOS 8 – user2218399 2014-10-18 18:12:39

你必须对车身造型，或使用溢出：滚动;

或者也可以使用

<div style="width:100%;height:600px;overflow:auto;-webkit-overflow-scrolling:touch"> 
<iframe style="overflow:scroll;" src="www.iframe.com"></iframe> 
</div>

来源

2014-10-06 05:34:39

有一个在iOS 8的一个bug，打破一起滚动时-webkit-溢出滚动：触摸已经被应用到任何的溢出。

看一看这个问题我张贴在几个星期前： -webkit-overflow-scrolling: touch; breaks in Apple's iOS8

来源

2014-10-27 15:32:31

它没有对我的工作！但我可以在看完这篇文章后找出一个小诀窍： https://css-tricks.com/forums/topic/scrolling-iframe-on-ipad/

只是把一个！重要的后，工作就好！

-webkit-overflow-scrolling: touch !important; 
overflow-y: scroll !important;

来源

2015-03-09 14:12:11

我能够放置一个iframe一个div（充当容器）内，使iOS中的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人来说，这里是建议。在GWT的情况下，只需在ScrollPanel（div）中放置一个iframe并应用上面的样式。

来源

2015-03-17 16:04:21

欢迎@ user3548310，为您的下一篇文章，我建议您阅读：http://stackoverflow.com/editing-help – AdrieanKhisbe 2015-03-17 16:25:00

为了使iOS上的iframe滚动的，你必须在CSS3属性-webkit-overflow-scrolling: touch添加到父容器：

<div style="overflow:auto;-webkit-overflow-scrolling:touch"> 
    <iframe src="./yxz" style="width:100%;height:100%"> 
</div>

来源

2015-10-07 13:43:36 gem007bd

这应该显然是被接受的答案 – blackhawk 2016-04-14 20:31:48

是的，这个解决方案解决了这个问题。 TQ。 – mjb 2017-09-23 05:08:33

我终于得到了很多时间和测试后，我的工作。基本上什么对我来说是这样的（显示为内联样式演示）。使外部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>

来源

2016-01-23 19:29:31

“使外部div溢出自动防止在桌面上显示额外的一组滚动条。”这里的观点，谢谢！对我来说，实际上，'overflow：auto; -webkit-overflow-scrolling：touch;'在iframe上的wrapper和'display：block'就足够了。 – bencergazda 2016-03-25 15:27:13

的必须是定义为DIV您scroll-container到fixed是全屏大小。然后在内iframe创建一个主要内容谁有一个属性滚动。

里面你IFRAME，在mainContainer-scroll，您可以添加：

-webkit-overflow-scrolling: touch //对于主动平滑滚动
-webkit-transform: translate3d(0, 0, 0) //对于物料加速
overflow-y:scroll; //对于添加在ÿ滚动 axis
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>

来源

2017-02-15 11:25:55

Iframe滚动iOS 8

回答

相关问题