Web Application - How to scroll a div styled with absolute position and scroll overflow-y on Android

Question

My name is Nick. I am developing a web application which contains a drop down menu wrapped in a div which is styled with absolute position and scroll overflow-y. If users want to see more options (text) from the menu, they need to scroll it down (using mouse wheel or their finger on touch devices).

My web app runs well on all popular (desktop / laptop) web browsers, iPads, and iPhones, but the menu is not scrollable on Android (smartphones and tablets). I tried to use both Chris's idea (http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/) and Tom's (How do I get Android to respond to touch drags?) to handle touch events, but it still has not worked.

Could you all please give me some hints to overcome this issue ? Your help would be much appreciated.

I am using only HTML5, CSS, and jQuery. The function given below is applied on information-provided (text + images) div containers which you want to make it scrollable on touch devices.

Here is my customised code:

/* Make scrollable texts scrollable on touch devices */

function touchScroll(id, option) {
    var scrollStartPosY = 0, scrollStartPosX = 0;
    var element = document.getElementById(id), jQueryId = '#' + id, jQueryElement = $(jQueryId);
    if (!element) {
        return;
    }

    if (option == "disable") {
        jQueryElement.unbind("touchstart");
        jQueryElement.unbind("touchmove");
        return;
    }

    /*
     * Note that Android browser doesn't support a web app featuring divs with overflow: scroll styling.
     * So we need to use touches and drags with our own custom functions
     */

    jQueryElement.bind("touchstart", function(event) {
        scrollStartPosY = jQueryElement.scrollTop() + event.originalEvent.touches[0].pageY;
        scrollStartPosX = jQueryElement.scrollLeft() + event.originalEvent.touches[0].pageX;
        event.preventDefault();
    });

    jQueryElement.bind("touchmove", function(event) {
        // These if statements allow the full page to scroll (not just the div) if they are
        // at the top of the div scroll or the bottom of the div scroll
        // The -5 and +5 below are in case they are trying to scroll the page sideways
        // but their finger moves a few pixels down or up.  The event.preventDefault() function
        // will not be called in that case so that the whole page can scroll.
        if (((jQueryElement.scrollTop() < (element.scrollHeight - element.offsetHeight)) &&
            ((jQueryElement.scrollTop() + event.originalEvent.touches[0].pageY) < scrollStartPosY - 5)) ||
            (jQueryElement.scrollTop() != 0 && ((jQueryElement.scrollTop() + event.originalEvent.touches[0].pageY) > (scrollStartPosY + 5)))) {
            event.preventDefault();
        }
        if (((jQueryElement.scrollLeft() < (element.scrollWidth - element.offsetWidth)) &&
            ((jQueryElement.scrollLeft() + event.originalEvent.touches[0].pageX) < (scrollStartPosX - 5))) ||
            (jQueryElement.scrollLeft() != 0 && ((jQueryElement.scrollLeft() + event.originalEvent.touches[0].pageX) > (scrollStartPosX + 5)))) {
            event.preventDefault();  
        }

        jQueryElement.scrollTop (scrollStartPosY - event.originalEvent.touches[0].pageY);
        jQueryElement.scrollLeft (scrollStartPosX - event.originalEvent.touches[0].pageX);
    });
}