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

回答

相關問題