¿Cómo detener el desplazamiento de la página para un sitio web móvil?

Tengo una página web en la que quiero evitar que la página se desplace X. La razón es que tengo menús a la izquierda y a la derecha de la página que están configurados para que no se puedan ver, y se pueden animar dentro o fuera según el en qué botón se hace clic. Esto funciona bien en un escritorio cuando cuando lo pruebo en mi teléfono y tableta todavía puedo desplazarme por la ventana X. Lo cual no es bueno ya que se desplaza para mostrar el div oculto.

Intenté evitar esto usando CSS, que nuevamente funciona en un escritorio pero quiero que tenga el mismo efecto en un dispositivo móvil o tableta.

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:

 
page

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); } } 

¿Hay alguna manera de recrear esto para dispositivos móviles?

En vez de esconderlos de la pantalla, ¿ha considerado tenerlos todos en el mismo índice Z y configurarlos para que estén ocultos cuando no están activos, por lo que no forman parte del flujo de documentos?


He hecho un ejemplo rápido desde cero solo para demostrar la idea.

Cuando el menú lateral está oculto, no forma parte de la página, por lo que el navegador debe mostrar solo el div principal.

HTML

 HIDE SIDE  
MAIN CONTENT

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/

Según mi experiencia con los dispositivos móviles de prueba, si los elementos son tanto como 1 píxel más ancho que la ventana gráfica, la página será desplazable o arrastrable en cualquier eje que se desborde, independientemente de si está configurado “overflow: hidden”.

La forma en que he resuelto esto con la aplicación web en la que estoy trabajando es tener la stack de menú debajo de los contenidos y animar el contenido div a la izquierda o a la derecha.

Para ver un ejemplo de otro proyecto con este enfoque, consulte: Github: Ajustar

También probé iScroll, pero los requisitos para mi proyecto lo hicieron demasiado complejo. Sin embargo, podría funcionar para ti. Reemplaza completamente el desplazamiento nativo. Cubiq: iScroll 4