Skip to main content

Disable scrolling in an iPhone web application?

Image
By User



Is there any way to completely disable web page scrolling in an iPhone web app? I've tried numerous things posted on google, but none seem to work.





Here's my current header setup:







<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>

<meta name="apple-mobile-web-app-capable" content="yes"/>







document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });





doesn't seem to work.


Labels:

Comments

  1. Tips For AllMarch 9, 2012 at 6:34 AM

    Change to the touchstart event instead of touchmove. Under One Finger Events it says that no events are sent during a pan, so touchmove may be too late.

    I added the listener to document, not body.

    ReplyDelete
  2. Tips For AllMarch 9, 2012 at 6:34 AM

    The page has to be launched from the Home screen for the meta tag to work.

    ReplyDelete
  3. Tips For AllMarch 9, 2012 at 6:34 AM

    This should work. No more gray areas at the top or bottom:)

    <script type="text/javascript">
    function blockMove() {
    event.preventDefault() ;
    }
    </script>

    <body ontouchmove="blockMove()">


    But this also disables any scrollable areas. If you want to keep your scrollable areas and still remove the rubber band effect at the top and bottom, see here: http://flow.bz/uaIgUn.

    ReplyDelete

Post a Comment

Popular posts from this blog

Why is this Javascript much *slower* than its jQuery equivalent?

By User
I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...
3 comments
Read more