What is the simplest way to create a vertically scrolling div in the Android Browser?

Question

Note: I realize very similar questions have been asked, but the mobile web is young and volatile, and those discussions being a couple of years old are likely out of date.

I'm trying to create a simple scrolling <div> in the Android browser- what would be a accomplished by giving it a fixed size and overflow-y: auto in a compliant browser. Unfortunately, mobile Webkit browsers don't seem to support that attribute. How else can I create this functionality or something equivalent?

I'd prefer a CSS solution if possible. I've seen the JavaScript widgets iScroll and Dojo Mobile lists but those seem like overkill for what I'm trying to do. The iScroll page mentions that "latest Android revisions are supporting this functionality (although support is not optimal)" so I wonder if Android 4.0 might have fixed this problem.

I don't believe you can do this with just pure css, you need a javascript widget to handle it — David Nguyen, Apr 05 '12 at 15:26

Paystey · Answer 1 · 2012-04-06T17:08:16.157

I've used the standard touch events to good effect across a lot of different devices. If it's only a simple solution, rather than a weighty plugin just use the touchstart touchmove and touchend events top calculate movement and modify the scrollTop.

I couldn't find a standard CSS way across devices, but maybe webkit has some proprietary stuff.

P.S this was in the last 3 months.

[update]

You can use these events like any other,

var startX = 0;
var startY = 0;
var ele = document.getElementById('myScrollableDiv');
ele.addEventListener('touchstart', function(ev){
    startX = ev.screenX;
    startY = ev.screenY;
});

ele.document.getElementById('myScrollableDiv').addEventListener('touchmove', function(ev){
    movementX = startX - ev.screenX;
    movementY = startY - ev.screenY;
    ele.style.scrollLeft = ele.style.scrollLeft + movementX;
    ele.style.scrollTop = ele.style.scrollTop + movementY;
    ev.preventDefault();
});

This is completely from memory so it'll need some testing I can't do at the minute, and I don't have the code I used at the minute either (though that was in jQuery). This method does work nicely eventually, there's just a few things to work out. Hopefully that's enough of the gist for you to work off.

I'm not familiar with those event types. Could you include a quick example? — Travis Christian, Apr 06 '12 at 14:40

What is the simplest way to create a vertically scrolling div in the Android Browser?

1 Answers1