Is it possible to scroll div in Chrome for Android?

Question

Here is a snippet of text inside a scrollable div.

I can scroll it with two fingers in Chrome for Mac. I can scroll it with one finger on the iPad. However, I cannot find a way to scroll it in Chrome for Android.

Perhaps there is a workaround using the touch API?

Answer 1

When viewing error reports on this issue, I found this JavaScript library that solves the problem using touch events. It is also reported that it is fixed in Honeycomb, so I hope the fix will hit people as soon as they hit the Ice Cream Sandwich builds.

Answer 2

Chrome Android (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;
  }
}

div

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

Android 3.0 : ( ).

thoses, 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, (- ):

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