Movimiento del browser al arrastrar en móviles

11/Mar/2013 62

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. single dapoxetine pills for sale [#]

    Wow! In the end I got a blog from where I be capable of actually obtain valuable facts regarding my study and knowledge. http://www.deinformedvoters.org/dapoxetine-60mg

  2. Ullgjk [#]

    buy ivermectin for humans australia – ivermectin 5ml ivermectin goodrx

  3. Atesoi [#]

    stromectol 3 mg tablets price – ivermectin 4000 mcg ivermectin 2

  4. Javierexesk [#]

    how to use tinder , tinder app
    tinder dating app

  5. Tydtdb [#]

    stromectol generic – buy stromectol uk ivermectin 200mg

  6. Pdgsey [#]

    stromectol us – ivermectin lotion for lice stromectol

  7. Aforfl [#]

    buy ivermectin 6mg – topical ivermectin cost cost of stromectol

  8. Skkugf [#]

    ivermectin uk – stromectol for humans ivermectin over the counter uk

  9. Bpribu [#]

    can i buy clopidogrel over the counter – plavix brand name buy cheap plavix

  10. Javierexesk [#]

    how to use tinder , tinder date
    http://tinderentrar.com/

  11. Faxxtp [#]

    plavix cost 300 mg – plavix price canada clopidogrel 300 mg

  12. Aqyaew [#]

    ed edd eddy pillar men – hims ed pills review side effects can you take pills for ed along with propecia

Responder a celular de claudia ×

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

CSSLab