HTML 5 fixed screen iPad

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" co开发者_运维百科ntent="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" />

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?

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.