Iframe Horizontal Scrolling Not Rendering On Ios

I'm developing a iOS HTML 5 webapp and need to display a large page with lots of text. A iframe seems the right tool as it allows scrolling to view the content on a small screen.

Solution 1:

A better way to do this would be to use a div. I tested out your code and iframes do not seem to allow horizontal scrolling at all.

Unless you need to get the content from an external page (as that's what iframes are for), this should work:

<metaname="viewport"content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" /><divid="framecont"style="background-color:red; height: 200px; width: 200px; overflow: auto; -webkit-overflow-scrolling:touch;"><divclass="inside"style="background-color:blue; width: 400px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus tempus enim, ut ornare enim aliquet et. Nunc porta porttitor dolor, ut pharetra augue venenatis et. Ut felis diam, consectetur a viverra a, auctor vel lorem. Ut tempor magna eget sem faucibus adipiscing condimentum ipsum tincidunt. Sed aliquam venenatis enim ut dictum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas adipiscing ullamcorper tincidunt. Etiam fermentum arcu quis mi malesuada eget varius lorem convallis.
</div></div>

The viewport is set (I only included this because I had it on my test page) so that page scrolling is disabled. The #framecont div is like a container, with a set width and height. The inside div, .inside, acts as the direct container to the content. The width is set to a greater width than the parent div, so that it will scroll horizontally so you can see the rest of what's in the div.

You do not need to set the height of the second div as it will fill 100%. You could for instance, set the second div to a width of 1000px, if that's how long you wanted the content to scroll to, and then you would be able to scroll that amount.

Solution 2:

I strongly recommend using the iScroll library in this situation. You'll get a lot more control over the scrolling behavior as well as your layout.