Home/ Questions/Q 8030569
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T00:48:46+00:00

I’ve found many related questions but none with an answer that explains how to

  • 0

I’ve found many related questions but none with an answer that explains how to scroll an iframe using the 2 finger method in iOS 4.

I am able to scroll a div with 2 fingers by setting a width and height attribute and setting overflow: scroll;. Here’s a more complete example of this:

<div style='width: 280px; height: 200px; overflow: scroll; -webkit-overflow-scrolling: touch;'>
      Just imagine a bunch of content is in here, spanning well over 200px
      worth of height. You can scroll this just fine in iOS 4 by using 2 
      fingers, or in iOS 5 by swiping 1 finger thanks to 
      "-webkit-overflow-scrolling: touch;".
</div>

This same method isn’t working on iframes on my iPad 1 running iOS 4.3. Here’s a complete example that won’t scroll with any combination of fingers in iOS 4 (although, of course, the -webkit-overflow-scrolling allows it to work on iOS5):

<html>
<head>
    <style type="text/css">
    #scroller {
        width: 280px;
        height: 200px;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }
    #scroller iframe {
        width: 100%;
        height: 100%;
    }
    </style>
</head>
<body>

<div id="scroller">
    <iframe src="content.html">content.html is a big list of nonsense.</iframe>
</div>

</body>
</html>

I must add that I can get 2 finger scrolling to work if I set the width and height of the iframe to actual pixel values, like height: 1000px;, but I will never know how tall the iframe’s content will be. So, perhaps the real question is how can I convince mobile Safari in iOS 4 that the iframe inside of this div is indeed larger than 280×200 pixels?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    A simple idea posted by rossb @ github.com/fancyapps worked beautifully for both scrolling in iOS 4 (2 fingers) and iOS 5 (1 finger) and solves the “blank content on scroll” issues that iOS 5’s iframes seem to be plagued with. Basically, you don’t want the iframe to handle any scrolling. Give it a fixed width/height and wrap the scrollable content in your included file in a div that can be scrolled.

    Here’s an example:

    <iframe id="stupid-iframe" width="600" height="200" src="a-file.html"></iframe>

    a-file.html:

    <html>
<body>
<div id="wrapper" style="width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;">
...all my normal content...
</div>
</body>
</html>
    • 0