Czy można przewijać elementy div w Chrome na Androida?

Question

Here is a chunk of text inside a scrollable div.

Mogę przewinąć go dwoma palcami w Chrome na Maca. Mogę go przewinąć jednym palcem na iPadzie. Jednak nie mogę znaleźć sposobu na przewinięcie go w Chrome na Androida.

Być może istnieje obejście za pomocą interfejsu dotykowego API?

Answer 1

Podczas przeglądania raportów o błędach dotyczących tego problemu znalazłem this JavaScript library, który rozwiązuje problem za pomocą zdarzeń dotykowych. Co więcej, podobno zostało to naprawione w Honeycomb, więc mam nadzieję, że poprawka trafi w ludzi, gdy tylko zaczną budować Ice Cream Sandwich.

Answer 2

Kolejny szybki fix dla Chrome dla Androida (http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/)

Najpierw utworzyć funkcję, by sprawdzić, czy jest to dotykowy urządzenia ...

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

potem działać, aby div przewijalną

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); 
    } 
} 

... wywołaj funkcję przekazującą identyfikator elementu

touchScroll("divIdName"); 

Answer 3

Wszystkie wersje Androida przed wersją 3.0 są objęte przepełnieniem: przewiń lub automatycznie (bug info).

Dla thoses jQuery o to szybkie poprawki:

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; 
     }); 
} 

a następnie w przypadku korzystania modernizr:

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

ale to nie jest idealny, ponieważ wszystkie urządzenia dotykowe-stanie będzie mieć ten.

Jeśli używasz PhoneGap można zrobić (gdzieś po PhoneGap inited):

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