Iframe scrolling iOS 8 | 易学教程

问题

I have an iframe and i need it to have a scrolling overflow. it seems work out in desktop, i used a work around to make it work in iOS. it works on android and iOS now. however, iOS8 it fails.

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

回答1:

Use the code in this way

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

回答2:

In order to make an iframe scrollable on iOS, you have to add the CSS3 property -webkit-overflow-scrolling: touch to the parent container:

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

回答3:

I finally got mine working after many hours and testing. Basically what worked for me was this (shown as inline styling to demo). Making the outer div overflow auto keeps it from displaying an extra set of scrollbars on desktops.

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

回答4:

it did not work for me! but I could figure out a little trick after reading this post: https://css-tricks.com/forums/topic/scrolling-iframe-on-ipad/

Just put an !important after that and works just fine!

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

回答5:

I found that fixes 1 and 2 work on iOS 11, but I also found that in loading a responsive page into the iframe, overflow-x: hidden; was also needed to keep the iframe from moving left and right on scroll y attempts. Just FYI.

回答6:

There is a bug in iOS 8 that breaks scrolling all together when -webkit-overflow-scrolling:touch has been applied to anything that is overflown.

Have a look at the issue I posted a few weeks ago: -webkit-overflow-scrolling: touch; breaks in Apple's iOS8

回答7:

The must is define your scroll-container to fixed for the div is a fullscreen size. Then inside the iframe create a main content who have a properties scrolling.

Inside you iframe, in the mainContainer-scroll, you can add:

-webkit-overflow-scrolling: touch //For active smooth scroll
-webkit-transform: translate3d(0, 0, 0) //For material acceleration
overflow-y:scroll; //For add scrolling in y axis
position:absolute;height:100%;width:100%;top:0;left:0; //For fix the container

Main page

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

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

回答8:

Not knowing what is on the other end of "www.iframe.com"...but for me, in that file's css I added:

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

That fixed it.

回答9:

You have to use on body style or overflow:scroll;

Or also use

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

回答10:

I was able to make an iframe scroll in iOS by placing an iframe inside a div (which acts as container) and apply the styles as follows and this works perfectly.

.iframe {
    overflow: scroll !important;
    width: 100%;
    height: 100%;
    border: none;
}

.div {
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: none;
    background-color: #FFF;
}

As i am working in GWT, for GWT people here is the suggestion. In case of GWT just place an iframe in ScrollPanel (div) and apply the styles as above.

来源：https://stackoverflow.com/questions/26046373/iframe-scrolling-ios-8

标签

iframe

scroll

overflow

ios8