Question

我是StackOverflow的新手，但我在google搜索时阅读了很多帖子; - ）

我正在使用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。？。？ - 不记得确切），但在我的三星上效果很好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

PhoneGap + JQM Android滚动问题

2 个答案: