是否可以在Android版Chrome中滾動div？

Question

Here is a chunk of text inside a scrollable div.

我可以用兩根手指在Chrome for Mac中滾動它。我可以在iPad上用一根手指滾動它。不過，我無法找到任何方式在Chrome瀏覽器中滾動它。

也許有使用觸摸API的解決方法？

Answer 1

在瀏覽關於此問題的錯誤報告時，我發現this JavaScript library可以解決使用觸摸事件的問題。據報道，它也被固定在Honeycomb中，所以希望修補程序能夠在推出冰淇淋三明治時立即觸及人們。

Answer 2

另一個快速修復Android版Chrome（http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/）

首先創建一個函數來檢查是否是觸摸設備...

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

然後功能，使格滾動

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

...調用傳遞元素ID的函數

touchScroll("divIdName"); 

Answer 3

3.0之前的所有android版本都會出現溢出問題：scroll或auto（bug info）。

對於這裏使用jQuery放入系統是一個快速解決方案：

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

，然後如果使用的Modernizr：

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

，但它的效果並不理想，因爲所有的觸摸能夠設備都會有這個。

如果使用PhoneGap的，你可以做（​​PhoneGap的inited後某處）：

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