Movimiento del browser al arrastrar en móviles

11/Mar/2013 168

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. ivermectin1.com [#]

    ivermektiinipilleri maksaa Movimiento del browser al arrastrar en moviles | CSSLab | Laboratorio de ideas web https://ivermectin1.com/ 3mg ivermactin

  2. http://app.gumroad.com/asmr2021/p/best-asmr-online [#]

    It’s a shame you don’t have a donate button! I’d certainly
    donate to this superb blog! I suppose for now i’ll settle for bookmarking and adding your RSS feed
    to my Google account. I look forward to new updates and will talk about
    this blog with my Facebook group. Talk soon! asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr

  3. MarvinFuh [#]

    canadian pharmacy for viagra
    canadian pharmacy for cialis buy viagra internet cheapest generic viagra women and viagra how to get viagra without a prescription viagra order online best price on cialis pharma from canada canadian pharmacy store cheap viagra pills
    cheap viagra without prescription viagra pills for sale cheap canadian viagra cialis lowest price medication online

  4. closeted gay men dating [#]

    surge gay dating reddit https://gay-singles-dating.com/

  5. gay children dating site [#]

    popular gay black dating sites https://gaydatingcanada.com/

  6. gay dating site troll arrested [#]

    gay internet dating sites https://gaydatinglosangeles.com/

  7. quest bars your [#]

    That is very attention-grabbing, You’re a very skilled blogger.
    I have joined your rss feed and look ahead to searching for more of
    your excellent post. Additionally, I’ve shared your site in my social networks quest bars http://j.mp/3jZgEA2 quest bars

  8. bit.ly [#]

    It’s an remarkable paragraph for all the internet users; they will
    take advantage from it I am sure. cheap flights http://1704milesapart.tumblr.com/ cheap flights

  9. http://www.iherb.com [#]

    If you are going for best contents like myself, only go to see this web page daily for the reason that it
    provides feature contents, thanks quest bars https://www.iherb.com/search?kw=quest%20bars quest bars

  10. j.mp [#]

    Hi there, I enjoy reading through your article post. I wanted to write a little comment to support you.
    ps4 https://bitly.com/3nkdKIi ps4

  11. tinyurl.com [#]

    Ahaa, its fastidious conversation regarding this article at this place at this
    blog, I have read all that, so at this time me also commenting here.
    scoliosis surgery https://0401mm.tumblr.com/ scoliosis
    surgery

  12. coub.com [#]

    Hi, i read your blog from time to time and i own a similar one
    and i was just curious if you get a lot of spam remarks?
    If so how do you reduce it, any plugin or anything you can advise?
    I get so much lately it’s driving me mad so any support is
    very much appreciated. scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis
    surgery

  13. hydroxychloroquine eye exam [#]

    It’s appropriate time to make some plans for
    the future and it is time to be happy. I’ve read this post and if I could I wish to suggest you some interesting things or advice.
    Maybe you could write next articles referring to this article.
    I want to read more things about it! https://hhydroxychloroquine.com/

  14. Cami Avizesi [#]

    Cami Avize fiyatları, cami avize modelleri ve cami avize çeşitleri burada! Tıkla, en ucuz cami avize seçenekleri uygun fiyatlarla ayağına gelsin…

  15. zyrtec asthma relief [#]

    claritin vs allegra – https://allergyd.com

  16. cetirizine sale [#]

    cetirizine 5 mg tablets – http://allergyd.com

  17. neurontin gabapentin [#]

    blood pressure 111 over 40 http://gabenhim.com – neurontin brand name

  18. ivermectin for sale [#]

    Accustomed Message About this outcome
    https://ivermectstromect.com ivermectin tablets for sale
    https://ivermectinst.com ivermectin human tablets
    https://ivermectinst.com ivermectin over the counter
    https://ivermectinst.com ivermectin for sale
    https://ivermectstromect.com ivermectin 6 mg

CSSLab