How to stop page from scrolling for a mobile website?

Question

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 in or out depending on the which button is clicked. This works fine on a desktop when when I test it on my phone and tablet I can still scroll the window X. Which isn't good as it scrolls along to show the hidden div.

I have tried prevented this using CSS, which again works on a desktop but I want it to have the same effect on a mobile or tablet device.

CSS:

body{
    padding:0,0,0,0;
    overflow-x:hidden;
}
#nav{
    position:absolute;
    z-index:2;
    height:100%;
    width:300px;
    top:70px;
    left:-300px;
    background-color:#666;
    padding-top:10px;
    padding-bottom:10px;
    overflow:scoll;
    box-shadow: 5px 0px 5px #333;
}
#facebook{
    position:absolute;
    height:700px;
    width:320px;
    top:70px;
    left:100%;
    background-color:#666;
    z-index:2;
    padding-top:10px;
    padding-bottom:10px;
    box-shadow: -5px 0px 5px #333;
}

HTML:

<div id="page">
    <div id="content">page</div>
</div>
<div id="facebook"></div>
<div id="nav"></div>
<div id="footer"></div>

JavaScript:

var fb_visible = false;
function fb_toggle(){
    var fb_div = document.getElementById('facebook');
    var position = $("#facebook").position();
    var fb_width = $('#facebook').width();
    var newPos;
    if(fb_visible === false){
        fb_visible = true;
        newPos = parseInt(position.left) - fb_width; 
    }else{
        fb_visible = false;
        newPos = parseInt($(document).width());     
    }
    $('#facebook').animate({left:newPos+"px"},1000);
}
var nav_visible = false;
function nav_toggle(){
    var nav = document.getElementById('nav');
    var width = parseInt($('#nav').width());
    if(nav_visible === false){
        nav_visible = true;
        $('#nav').animate({left:"0px"},1000);
    }else{
        nav_visible = false;
        $('#nav').animate({left:"-"+width+"px"},1000);
    }
}

Is there a way to recreate this for mobile devices?

Answer 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

<a href="#" class="SideHide" title="Show/Hide Sidebar">HIDE SIDE</a>

<div class="Nav">
 SIDE BAR
</div>

<div class="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
    }
    else if (flag == 1) {
        $('.Wrap').animate({marginLeft: 200},{complete: function(){
            $('.Nav').fadeIn();
        }});
        flag = 0
    }
});

http://jsfiddle.net/r3x25/

Answer 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