CODEWITHSUNDEEP
androidgoogle-chromebrowser
Nick Retallack
Nick Retallack

Reputation: 19561

Is it possible to scroll divs in Chrome for Android?

Here is a chunk 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 my iPad. However, I can't find any way to scroll it in Chrome for Android.

Perhaps there's a work-around using the touch API?

Upvotes: 5

Views: 3890

Answers (3)

Guillaume Gendre
Guillaume Gendre

Reputation: 2524

All android versions before 3.0 are bugged with overflow:scroll or auto (bug info).

For thoses using jQuery here is a quick fix :

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

and then if using modernizr :

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

but it's not ideal because all touch-able devices will have this.

If you use Phonegap you can do (somewhere after phonegap inited):

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

Upvotes: 2

Carlos A. Cabrera
Carlos A. Cabrera

Reputation: 1984

Another quick fix for Chrome for Android (http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/)

First create a function to check whether the it is a touch device...

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

then function to make div scrollable

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

... call the function passing the element id

touchScroll("divIdName");

Upvotes: 3

Nick Retallack
Nick Retallack

Reputation: 19561

While browsing through the bug reports on this issue, I found this JavaScript library that solves the problem using touch events. Also it is reportedly fixed in Honeycomb, so hopefully the fix will hit people as soon as they push builds of Ice Cream Sandwich.

Upvotes: 2

Related Questions