Fatal编程技术网

Iframe滚动iOS 8

iframe scroll ios8

Iframe滚动iOS 8,iframe,scroll,overflow,ios8,Iframe,Scroll,Overflow,Ios8,我有一个iframe，我需要它有一个滚动溢出。它似乎是在桌面上工作的，我用了一个变通的方法使它在iOS上工作。它现在可以在android和iOS上运行。然而，它失败了 <html> <body> <style type="text/css"> .scroll-container { overflow: scroll; -webkit-overflow-scrolling: touch;

我有一个iframe，我需要它有一个滚动溢出。它似乎是在桌面上工作的，我用了一个变通的方法使它在iOS上工作。它现在可以在android和iOS上运行。然而，它失败了

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


.滚动容器{
溢出：滚动；
-webkit溢出滚动：触摸；
}
#IFU调查{
身高：100%；
}
.滚动容器{
身高：100%；
宽度：100%；
溢出：滚动；
}
不知道“www.iframe.com”的另一端是什么……但对我来说，在该文件的css中，我添加了：

body {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}
这就解决了问题。

以这种方式使用代码

<div style="overflow:auto;-webkit-overflow-scrolling:touch">
    <iframe style="width:100%;height:600px" src="www.iframe.com"></iframe>
</div>
您必须在车身样式或 溢出：滚动

或者也使用

<div style="width:100%;height:600px;overflow:auto;-webkit-overflow-scrolling:touch">
<iframe style="overflow:scroll;" src="www.iframe.com"></iframe>
</div>
iOS 8中存在一个bug，当-webkit溢出滚动时，会同时中断滚动：触摸已应用于溢出的任何内容

看看我几周前发布的问题：

它对我不起作用！但读了这篇文章后，我发现了一个小把戏：

放一把枪！在那之后很重要，而且工作很好

-webkit-overflow-scrolling: touch !important;
overflow-y: scroll !important;
我能够在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人员的建议。
如果是GWT，只需在ScrollPanel（div）中放置一个iframe并应用上述样式。

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

<div style="overflow:auto;-webkit-overflow-scrolling:touch">
  <iframe src="./yxz" style="width:100%;height:100%">
</div>
经过几个小时的测试，我终于让我的工作正常了。基本上对我有用的是这个（显示为演示的内联样式）。
使外部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是全屏大小。然后在iframe中创建一个具有属性滚动的主内容

在iframe内部的
主容器滚动中
，您可以添加：

  • -webkit溢出滚动：触按
    //可进行活动平滑滚动
  • -webkit转换：translate3d（0,0,0）
    //用于材料加速
  • overflow-y：滚动//用于在y轴中添加滚动
  • 位置：绝对位置；身高：100%；宽度：100%；排名：0；左：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>


#IFU调查{
身高：100%；
}
.滚动容器{
身高：100%；
宽度：100%；
位置：固定；
}
内部Iframe

<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>
我发现修复程序1和2在iOS 11上工作，但我也发现在将响应页面加载到iframe中时，
overflow-x:hidden来防止iframe在滚动尝试时左右移动。仅供参考。
同样的问题，iOS8弄糟了一些非常糟糕的东西是safari还是UIWebView应用程序？iOS8的safari@ReigoHeinchrome for iOS8似乎也有同样的问题。我也有同样的问题，对我有效的是提供了-webkit溢出滚动：touch to dom元素。我还对元素高度进行了一些操作。我必须使用jquery显式地给出元素高度。如果你能为我们提供一把小提琴，我可以帮助你修复它。是的，如果你有权访问iframecss，那就可以修复它。如果你没有。仍然没有答案。这是更好的解决方案，对我来说，它在ios8中工作，但是当iframe高度大于body height时，它可能会出现渲染问题。请参阅此处以获得更详细的解释：基本区别是使用
溢出：自动
而不是
溢出：滚动
？这对我不起作用。welcome@user3548310，在下一篇文章中，我建议您阅读：“使外部div溢出自动防止它在桌面上显示额外的一组滚动条。”这是重点，谢谢！实际上，对我来说，
overflow:auto-webkit溢出滚动：触摸和iframe上的
显示：block
就足够了。这非常有效，谢谢！然而，为了避免在浏览器（Chrome71）中出现第二个滚动条，我不得不降低高度