PhoneGap + JQM Android 滚动问题答案

【问题标题】：PhoneGap + JQM Android scroll issuePhoneGap + JQM Android 滚动问题
【发布时间】：2012-02-22 16:22:22
【问题描述】：

我是 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.?.? - 不记得确切) 但在我的三星 Galaxy Nexus 上效果很好(Android 4.0.2)。

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

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

【问题讨论】：

标签： jquery android mobile cordova overflow

【解决方案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;
        }
}

【讨论】：

【解决方案2】：

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

【讨论】：