PhoneGap + JQM Android 滚动问题

Question

我是 StackOverflow 的新手，但我在谷歌搜索时读了很多帖子；-)

我正在使用 PhoneGap + jQuery Mobile 组合开发一个 webApp，但我在 Android 上遇到滚动问题。我的页面如下所示：

<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>

我的 JS 上有：

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

设置高度有效，但 overflow-y:scroll 不适用于我的 HTC Desire (Android 2.3.3) 和 HTC Sensation (Android 3.4)。 ?.? - 不太记得了）但在我的 Samsung Galaxy Nexus (Android 4.0.2) 上运行良好。

我不知道为什么，我正在寻找解决方案...我做了一些测试，发现如果不使用溢出，页面会滚动，但我的页脚没有固定在屏幕底部，我会使用滚动内容固定页眉/内容/页脚。

编辑：好的，我在互联网上阅读了很多页面，似乎不支持溢出（以及许多其他......）。因此，我决定将菜单链接放在标题上，与标题标题内联（就像 iOS 上的“后退”按钮）。我只有三页，减去实际的我有两个链接，所以将它们放在标题上对我来说是一种选择。真可惜 ！但它有效，这是必不可少的;-)

Answer 1

我的 HTC Desire 也遇到了同样的问题。试试这个：

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

如果您确实想要滚动，请使用 iscroll 4 插件。它适用于许多操作系统，它加快了开发速度并允许您拥有更多的控制权。 http://cubiq.org/iscroll-4