iframe 滚动 iOS 8答案

【问题标题】：Iframe scrolling iOS 8iframe 滚动 iOS 8
【发布时间】：2014-11-20 16:28:30
【问题描述】：

我有一个 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>

【问题讨论】：

遇到同样的问题，iOS8搞砸了一些很糟糕的事情
是 safari 还是 UIWebView 应用？
safari for iOS8 @ReigoHein
chrome for iOS8 好像也有同样的问题
我遇到了同样的问题，对我有用的是将 -webkit-overflow-scrolling:touch 提供给 dom 元素。我还对元素高度做了一些操作。我必须使用 jquery 明确地给出元素高度。如果你能给我们提琴，我可以帮你修。

标签： iframe scroll overflow ios8

【解决方案1】：

我发现修复 1 和 2 在 iOS 11 上有效，但我还发现在将响应式页面加载到 iframe 中时，还需要 overflow-x: hidden; 以防止 iframe 在滚动 y 尝试时左右移动。仅供参考。

【讨论】：

【解决方案2】：

必须将scroll-container 定义为fixed，因为div 是全屏尺寸。然后在 iframe 内创建一个具有滚动属性的主要内容。

在您的 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>

内嵌框架

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

【讨论】：

【解决方案3】：

我可以通过将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 并应用上述样式。

【讨论】：

welcome@user3548310，对于您的下一篇文章，我建议您阅读：stackoverflow.com/editing-help

【解决方案4】：

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

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

【讨论】：

这很好用，谢谢！但是，我不得不使用降低的高度 <iframe style="width: 100%; height: 99%; border: none;"> 以避免在我的浏览器中出现第二个滚动条（Chrome 71）

【解决方案5】：

经过数小时和测试后，我终于开始工作了。基本上对我有用的是这个（显示为演示的内联样式）。使外部 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>

【讨论】：

“使外部 div 溢出自动使其不会在桌面上显示一组额外的滚动条。”这是重点，谢谢！对我来说，实际上，包装器上的 overflow: auto; -webkit-overflow-scrolling: touch; 和 iframe 上的 display: block 就足够了。

【解决方案6】：

它对我不起作用！但读完这篇文章后我可以想出一个小窍门： https://css-tricks.com/forums/topic/scrolling-iframe-on-ipad/

在后面加上一个 !important 就可以了！

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

【讨论】：

【解决方案7】：

iOS 8 中存在一个错误，当 -webkit-overflow-scrolling:touch 应用于任何溢出的内容时，整个滚动都会中断。

看看我几周前发布的问题： -webkit-overflow-scrolling: touch; breaks in Apple's iOS8

【讨论】：

【解决方案8】：

你必须使用身体风格或溢出：滚动；

或者也可以使用

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

【讨论】：

【解决方案9】：

这样使用代码

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

【讨论】：

这是更好的解决方案，对我来说它在 ios8 中工作，但是当 iframe 高度大于主体高度时它可能会出现渲染问题。更详细的解释见这里：dev.magnolia-cms.com/blog/2012/05/…
基本区别是使用overflow:auto而不是overflow:scroll？这对我不起作用。

【解决方案10】：

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

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

这样就解决了。

【讨论】：

是的，如果您可以访问 iframe css，则可以修复它。如果你不这样做。仍然没有答案。