iPhone Safari vs. Iframe using Anchors

Hey hey, I have a mobile page that isn't working in Safari - it works perfect in desktop browsers, and on Android and BlackBerry. I have a features area on the page. I want to avoid using JS (as some mobile browsers come with it disabled). If possible I want to use just HTML and CSS.

I don't want the page to scroll for ages, so I use an iframe with a series of divs that have Anchors; eg. . The idea is that when you're in that frame and click a link you're taken to the next featured div in the iframe.

Safari however scrolls the parent page, and not the iframe. Any way around this?

I have a demo, but apparently I'm too new to Stack Over flow to post a link!

http, colon slash slash, rle dot me /frame/1.html

Thanks for your help!

I don't think you can do this without any Javascript whatsoever.

To avoid the whole page from scrolling, call the event.preventDefault() function on any touchMove event.

<body ontouchmove="event.preventDefault();"> /* Whatever you have in your body */ </body>

If you want scrolling within an element, create a container <div> that has a fixed width and height that contains whatever content within it that is larger than the container. The container should have the overflow: none; or overflow: hidden; CSS properties so that the only the content within the container is shown.

ansaurus

tags:

views:

answers:

iPhone Safari vs. Iframe using Anchors

related questions