是否可以在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')) 
}