jquery - Web アプリケーション - Android で絶対位置でスタイル設定された div をスクロールし、overflow-y をスクロールする方法

Question

私の名前はニックです。絶対位置とスクロールオーバーフローでスタイル設定された div でラップされたドロップダウン メニューを含む Web アプリケーションを開発しています。ユーザーがメニューからさらにオプション (テキスト) を表示したい場合は、下にスクロールする必要があります (マウス ホイールまたはタッチ デバイスの指を使用)。

私の Web アプリは、すべての一般的な (デスクトップ/ラップトップ) Web ブラウザー、iPad、および iPhone で正常に動作しますが、メニューは Android (スマートフォンとタブレット) ではスクロールできません。クリスのアイデア ( http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/ ) とトムの ( How do I get Android to response to touch drags? ) の両方を使用してタッチイベントを処理しようとしましたが、それでも動作していません。

この問題を克服するためのヒントを教えてください。どうぞよろしくお願いいたします。

HTML5、CSS、jQuery のみを使用しています。以下の関数は、タッチ デバイスでスクロール可能にする情報提供 (テキスト + 画像) div コンテナーに適用されます。

これが私のカスタマイズされたコードです：

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