¿Es posible desplazar divs en Chrome para Android?

Question

Here is a chunk of text inside a scrollable div.

Puedo desplazarme con dos dedos en Chrome para Mac. Puedo desplazarlo con un dedo en mi iPad. Sin embargo, no puedo encontrar ninguna forma de desplazarlo en Chrome para Android.

¿Quizás haya una solución alternativa con la API táctil?

Answer 1

Mientras navego por los informes de errores sobre este tema, encontré this JavaScript library que resuelve el problema usando eventos táctiles. También, según los informes, se corrigió en Honeycomb, por lo que es de esperar que la solución afecte a las personas tan pronto como empujen las versiones de Ice Cream Sandwich.

Answer 2

Otra solución rápida para Chrome para Android (http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/)

En primer lugar crear una función para comprobar si el es un dispositivo táctil ...

function isTouchDevice(){ 
    try { 
    document.createEvent("TouchEvent"); 
    return true; 
    } catch(e) { 
    return false; 
    } 
} 

funcionan entonces para hacer div desplazable

function touchScroll(id){ 
    if(isTouchDevice()){ //if touch events exist... 
    var el = document.getElementById(id); 
    var scrollStartPos = 0; 

    document.getElementById(id).addEventListener("touchstart", function(event){ 
     scrollStartPos = this.scrollTop + event.touches[0].pageY; 
     event.preventDefault(); 
    }, false); 

    document.getElementById(id).addEventListener("touchmove", function(event){ 
     this.scrollTop = scrollStartPos - event.touches[0].pageY; 
     event.preventDefault(); 
    },false); 
    } 
} 

... llamar a la función que pasa el elemento id

touchScroll("divIdName"); 

Answer 3

Todas las versiones de Android anteriores a la 3.0 tienen errores de desbordamiento: desplazamiento o automático (bug info).

Para thoses utilizando jQuery aquí es una solución rápida:

function touchScroll(selector){ 
     var scrollStartPos = 0; 
     $(selector).live('touchstart', function(event) { 
     scrollStartPos = this.scrollTop + event.originalEvent.touches[0].pageY; 
     }); 
     $(selector).live('touchmove', function(event) { 
     this.scrollTop = scrollStartPos - event.originalEvent.touches[0].pageY; 
     }); 
} 

y luego si se utiliza Modernizr:

if (Modernizr.touch) { 
    touchScroll($('.myScrollableContent')) 
} 

pero no es ideal, ya que todos los dispositivos táctiles capaces tendrán esto.

Si utiliza Phonegap se puede hacer (en algún lugar después PhoneGap inited):

if (window.device && device.platform=="Android" && parseInt(device.version) < 3){ 
    touchScroll($('.myScrollableContent')) 
}