PhoneGap + JQM Android scroll issue

Question

I'm new on StackOverflow, but I read a lot of posts when googling ;-)

I'm developping a webApp using PhoneGap + jQuery Mobile combo and I have a problem with scroll on Android. My page looks like this :

<div data-role="page" id="categories">
<div data-role="header">...</div>

<div data-role="content" style="padding:0 15px;">
<div id="categories_canvas" style="overflow-y:scroll;">...</div>
</div>

<div data-role="footer">...</div>
</div>

I have on my JS :

var height_canvas = $(window).height() - $("div.ui-footer").outerHeight() - $("div.ui-header").outerHeight()
$("#categories_canvas").height(height_canvas);

Setting height works, but the overflow-y:scroll doesn't on my HTC Desire (Android 2.3.3) and HTC Sensation (Android 3.?.? - don't remember exactly) but works great on my Samsung Galaxy Nexus (Android 4.0.2).

I don't know why and I'm searching for a solution... I made some tests and I discovered that if I don't use the overflow, the page scrolls but my footer isn't fixed at the bottom of the screen, and I would a fixed header/content/footer with scrolled content.

EDIT : Okay, I have read a lot of pages on internet, and it seems that the overflow is not supported as I would (and many others...). So I decided to put my menu links on the header, inline with the header title (like "Back" button on iOS). I have only three pages, minus actual I have two links, so putting them on the header is for me an alternative. What a pity ! But it works and this is the essential ;-)

Answer 1

I had the same problem on my HTC Desire. Try this:

function set_scrollable () {
    if(isTouchDevice()){ 

        var scrollStartPosY=0;

        document.getElementById("categories_canvas").addEventListener("touchstart", function(event) {
            scrollStartPosY=this.scrollTop+event.touches[0].pageY;
            event.preventDefault();
        },false);

        document.getElementById("categories_canvas").addEventListener("touchmove", function(event) {
            this.scrollTop=scrollStartPosY-event.touches[0].pageY;
            event.preventDefault();
        },false);
    }
}

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

Answer 2

Use the iscroll 4 plug in if you really want the scroll. It works on many OS, it speeds developement and allows you to have a lot of controll. http://cubiq.org/iscroll-4