HTML 5 fixed screen iPad

Question

I can't seem to find the right tag. When the screen is swiped on iPad in certain places the whole screen moves, with the "rubber band" effect I know there is a way to lock the screen, specific to HTML5 and webkit.

using <iframe src="" width="1024" height="724" scrolling="no"></iframe>

seems like a cheap fix, these are my headers.

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />

Answer 1

Try this:

<script>
    // document.body works probably too
    document.ontouchmove = function(e) {
        e.preventDefault();
    };
</script>

Note that this approach disables scrolling on the whole page! Sometimes this might be undesirable. If so, check out How to Disable Rubber Band in iOS Web Apps?

Answer 2

Just in case people don't read the comments on the answer, here is a solution I found when investigating to answers @bebraw 's comment:

How to disable rubber band in iOS web apps?

It is a lot of work for something so small but allows a granular approach on what get the scroll and what doesn't.