CODEWITHSUNDEEP
iphoneiframescroll
Jonathan Hawkes
Jonathan Hawkes

Reputation: 953

iframe scrolling on the iphone

I was aware of multiple scrolling libraries (TouchScroll, iScroll) for the iPhone/iOS due to its inability (???) to support overflow:scroll . However, I was not aware (and I am looking for confirmation) that IFRAMEs don't really work either. It appears that the iframe doesn't respect any attempt to give it a fixed size and always just resizes itself to its content. Am I correct on this? Is the only way to scroll an IFRAME to place it inside a block element with the overflow CSS property set and then to use a lib like the aforementioned?

Upvotes: 14

Views: 8327

Answers (5)

p4tch
p4tch

Reputation: 81

simply adding...

overflow-y:auto; 
-webkit-overflow-scrolling:touch;

to a div around my iframe worked for me

Upvotes: 8

WhatsInAName
WhatsInAName

Reputation: 724

The code below works for me (thanks to Christopher Zimmermann for his blog post http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/). The problems are: 1. There are no scroll bars to let the user know that they can scroll 2. Users have to use two-finger scrolling 3. The PDF files are not centered (still working on it)

    <!DOCTYPE HTML>
    <html>
    <head>
      <title>Testing iFrames on iPad</title>
      <style>
      div {
        border: solid 1px green;
        height:100px;
      }

    .scroller{
        border:solid 1px #66AA66;
        height: 400px;
        width: 400px;
        overflow: auto;
        text-align:center;

    }
    </style>

</head>

<body>

    <table>
      <tr>
        <td><div class="scroller">
        <iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
    </div>
        </td>
        <td><div class="scroller">
        <iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
    </div>
        </td>
      </tr>
      <tr>
      <td><div class="scroller">
        <iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
    </div>
        </td>
        <td><div class="scroller">
        <iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
    </div>
        </td>
      </tr>
    </table>
    <div> Here are some additional contents.</div>
</body>
</html>

Upvotes: 0

Grady Player
Grady Player

Reputation: 14549

Flippant answer: don't use IFRAMES anymore.

Upvotes: -4

Tim
Tim

Reputation: 14446

You can scroll any content which is set to overflow:auto by touching with two fingers and dragging. Don't put iFrame inside a div with overflow:auto, and instead set the iframe to overflow:auto itself. Unfortunately, iframe scrolling is very choppy, regardless of content or device, so the best solution is to find a way to make your content fit into one long page, with "top" & "bottom" view divs set to follow the viewport (if this is the effect you're going for.)

Upvotes: 1

gotnull
gotnull

Reputation: 27214

Have you given Joe Hewitt's Scrollability library a go?

You can read more about it here:

Scrollability, New iOS Physics Project from Facebook for iPhone Creator, Joe Hewitt

Hope this helps.

Upvotes: 0

Related Questions