web-dev-qa-db-ja.com

iOS 8でスクロールするiframe

私は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>
iframescrolloverflowios8
38
Adrian Mojica

この方法でコードを使用する

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

IOSでiframeをスクロール可能にするには、CSS3プロパティ-webkit-overflow-scrolling: touchを親コンテナに追加する必要があります。

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

私はついに、何時間もテストを重ねて作業を始めました。基本的には、これが効果的でした（デモのインラインスタイリングとして表示）。外側の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>
6
Robin B

私にはうまくいきませんでした！しかし、この投稿を読んだ後、ちょっとしたトリックを見つけることができました： https://css-tricks.com/forums/topic/scrolling-iframe-on-ipad/

あとに！importantを追加するだけで正常に機能します！

-webkit-overflow-scrolling: touch !important;
overflow-y: scroll !important;
3
Renato Dantas

修正1と2はiOS 11で動作することがわかりましたが、iframeにレスポンシブページを読み込む際に、スクロールy試行でiframeが左右に移動しないようにするためにoverflow-x: hidden;も必要であることがわかりました。ちょっとだけ。

2
Joe Williams

IOS 8には、オーバーフローしたものに-webkit-overflow-scrolling：touchが適用されたときにスクロールがすべて一緒に壊れるバグがあります。

数週間前に投稿した問題をご覧ください： -webkit-overflow-scrolling：touch; breaks of Apple's iOS8

2
Jamie Beech

divはフルスクリーンサイズであるため、scroll-containerをfixedに定義する必要があります。次に、iframe内で、プロパティがスクロールするメインコンテンツを作成します。

Iframe内のmainContainer-scrollで、次を追加できます。

  • -webkit-overflow-scrolling: touch //アクティブなスムーズスクロール用
  • -webkit-transform: translate3d(0, 0, 0) //材料加速用
  • overflow-y:scroll; // y 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>
1
P. Frank

「www.iframe.com」のもう一方の端に何があるのか​​分からない...しかし、私にとっては、そのファイルのCSSに追加しました：

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

それはそれを修正しました。

0
deep rock

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の場合、iFrameをScrollPanel（div）に配置し、上記のようにスタイルを適用します。

0
Manne Teja

Bodyスタイルまたはoverflow：scrollで使用する必要があります。

または使用する

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