Movimiento del browser al arrastrar en móviles

11/mar/2013 2

Este es un comportamiento por defecto de los browsers para móviles, el cual al hacer algún tipo de arrastre extremo dentro del <body> (me refiero del extremo superior al inferior principalmente, ó si está en landscape de derecha a izquierda y viceversa) éste se mueve levemente con un efecto resorte, lo que eventualmente puede llegar a ser molesto si queremos concentrar nuestras interacciones en eventos gestuales.

Para mejor entendimiento, play al siguiente video:

Abre ejemplo1.html en tu móvil, te sugiero usar el browser y no el lector de QR: http://www.csslab.cl/ejemplos/touchmove/ejemplo1.html

Ejemplo1

Para deshabilitar este comportamiento se necesita de una pizca de CSS y algo de JS:

html, body {
   height: 100%;
   overflow: hidden;
}
document.body.addEventListener('touchmove', function (event) {
   event.preventDefault();
});

Con esto bloqueamos por completo el evento touch move a todo el body, permitiendo todo lo que sea tap (click en desktop). Queda en tí si quieres volver a habilitarlo en algún sector para, por ejemplo, hacer funcionar un carrusel de imágenes através de un swipe (deslizar de un lado al otro).

Abre ejemplo2.html en tu móvil, te sugiero usar el browser y no el lector de QR: http://www.csslab.cl/ejemplos/touchmove/ejemplo2.html

Ejemplo2

Comentarios

  1. Claudia patricia ramirez castillo [#]

    Seme perdió mi celu

  2. celular de claudia [#]

    ????? Me encontraste?

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab