How To Stop Page From Scrolling For A Mobile Website?

I have a web page that I want to stop the page from being scrolled X. The reason is I have menus on the left and right of the page which are set so they can't be seen, and animted

Solution 1:

Instead of hiding them off screen have you considered having them all on the same z-index and setting them to hidden when not active so they are not part of the document flow at all?

---

I have done a quick example from scratch just to demonstrate the idea.

When the side menu is hidden it is not part of the page so browser should show only the main div.

HTML

<ahref="#"class="SideHide"title="Show/Hide Sidebar">HIDE SIDE</a><divclass="Nav">
 SIDE BAR
</div><divclass="Wrap">
 MAIN CONTENT
</div>

CSS

.Nav{
    background:#ccc;
    position:fixed;
    height:100%;
    width:200px;
}
.Wrap{
    background:#cdf;
    margin-left:200px;
    min-height:250px;
}

JAVASCRIPT

var flag = 0;
$('.SideHide').click(function() {
    if (flag == 0) {
        $('.Nav').fadeOut({complete: function(){
            $('.Wrap').animate({marginLeft: 0});
        }});
        flag = 1
    }
    elseif (flag == 1) {
        $('.Wrap').animate({marginLeft: 200},{complete: function(){
            $('.Nav').fadeIn();
        }});
        flag = 0
    }
});

http://jsfiddle.net/r3x25/

Solution 2:

From my experience with testing mobile devices, if the elements are so much as 1 pixel wider than the viewport, the page will be scrollable or draggable on whatever axis is overflowing, regardless if "overflow:hidden" is set.

The way I've solved this with the web app I'm working on is to actually have the menu stack beneath the contents and animate the content div to the left or right.

For an example of another project with this approach, see: Github: Snap

I also tried iScroll, but the requirements for my project made it too complex. It might work for you though. It completely replaces native scrolling. cubiq: iScroll 4