Deshabilitar el desplazamiento en todos los dispositivos móviles

Parece que debería haber una solución para todo Internet, pero no estoy seguro de por qué no puedo encontrarlo. Quiero desactivar el desplazamiento horizontal en dispositivos móviles. Básicamente tratando de lograr esto:

body{ overflow-x:hidden // disable horizontal scrolling. } 

Esta puede ser información relevante: también tengo esta etiqueta en mi cabeza, porque tampoco deseo que el usuario pueda hacer zoom:

   

Gracias

 html, body { overflow-x: hidden; } body { position: relative; } 

La posición relativa es importante, y me tropecé con eso. No podría hacerlo funcionar sin eso.

La respuesta de cgvector no funcionó para mí, pero esto hizo:

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

No lo dejaría así, se necesita una lógica más inteligente para seleccionar cuándo evitar el desplazamiento, pero este es un buen comienzo.

Tomado desde aquí: ¿ Deshabilita el desplazamiento en una aplicación web de iPhone?

Para las generaciones futuras:

Para evitar el desplazamiento, pero mantenga el menú contextual, intente

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

Todavía impide mucho más de lo que a algunos les gustaría, pero para la mayoría de los navegadores, el único comportamiento predeterminado que se debe evitar es el desplazamiento.

Para una solución más sofisticada que permite elementos desplazables dentro del cuerpo no desenrollable y evita la banda elástica, eche un vistazo a mi respuesta aquí:

https://stackoverflow.com/a/20250111/1431156

Prueba agregar

 html { overflow-x: hidden; } 

tanto como

 body { overflow-x: hidden; } 

Sospecho que la mayoría de las personas realmente quieren deshabilitar el zoom / scroll para armar una experiencia más similar a la de las aplicaciones; porque las respuestas parecen contener elementos de soluciones tanto para el acercamiento como para el desplazamiento, pero en realidad nadie tiene ninguno.

Desplazamiento

Para responder a OP, lo único que parece que es necesario para deshabilitar el desplazamiento es interceptar los eventos scroll y touchmove la ventana y llamar a preventDefault y stopPropagation sobre los eventos que generan; al igual que

 window.addEventListener("scroll", preventMotion, false); window.addEventListener("touchmove", preventMotion, false); function preventMotion(event) { window.scrollTo(0, 0); event.preventDefault(); event.stopPropagation(); } 

Y en su hoja de estilo, asegúrese de que su body y las tags html incluyen lo siguiente:

 html: { overflow: hidden; } body { overflow: hidden; position: relative; margin: 0; padding: 0; } 

Zoom

Sin embargo, el desplazamiento es una cosa, pero es probable que desee deshabilitar el zoom también. Que haces con la metaetiqueta en tu marcado:

  

Todos estos elementos juntos le brindan una experiencia similar a la de una aplicación, probablemente la más adecuada para el canvas.

(Tenga cuidado con los consejos de algunos para agregar atributos como initial-scale y width a la metaetiqueta si está utilizando un canvas, porque los canvass escalan sus contenidos, a diferencia de los elementos de bloque, y terminará con un canvas feo, más a menudo que no).

usa esto con estilo

 body { overflow:hidden; width:100%; } 

Use esto en la etiqueta de la cabeza

   

Esto funciona para mí:

 window.addEventListener("touchstart", function(event){ if(event.target.tagName=="HTML" || event.target.tagName=="BODY"){ event.preventDefault(); } } ,false); 

No funciona al 100% y también agregué esto:

 window.addEventListener("scroll",function(){ window.scrollTo(0,0) },false) 

En el encabezado de página, agregue

  

En la hoja de estilo de página, agregue

 html, body { overflow-x: hidden; overflow-y: hidden; } 

¡Es html y cuerpo!

Esto evita el desplazamiento en dispositivos móviles, pero no el solo clic / toque.

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

Lo siguiente funciona para mí, aunque no probé todos los dispositivos que hay que probar 🙂

 $('body, html').css('overflow-y', 'hidden'); $('html, body').animate({ scrollTop:0 }, 0);