PhoneGap的+ JQM Android的滚动发行 [英] PhoneGap + JQM Android scroll issue

问题描述

我在StackOverflow上新的，但谷歌上搜索的时候我看了很多帖子; - ）

I'm new on StackOverflow, but I read a lot of posts when googling ;-)

我使用的深化发展PhoneGap的+ jQuery Mobile的组合web应用程序和我有在Android上滚动的一个问题。我的页面看起来像这样：

I'm developping a webApp using PhoneGap + jQuery Mobile combo and I have a problem with scroll on Android. My page looks like this :

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

设置高度的作品，但溢出-Y：滚动不会对我的HTC Desire（Android版2.3.3）和HTC感觉（的Andr​​oid 3.0。？。？ - 不记得确切），但在我的三星GALAXY Nexus（Android版4.0.2）的伟大工程

Setting height works, but the overflow-y:scroll doesn't on my HTC Desire (Android 2.3.3) and HTC Sensation (Android 3.?.? - don't remember exactly) but works great on my Samsung Galaxy Nexus (Android 4.0.2).

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

I don't know why and I'm searching for a solution... I made some tests and I discovered that if I don't use the overflow, the page scrolls but my footer isn't fixed at the bottom of the screen, and I would a fixed header/content/footer with scrolled content.

编辑：好的，我读了很多互联网上的页面，似乎溢出，不支持，我会（和许多其他人......）。所以，我决定穿上我的头菜单链接，内联与头标题（如iOS上的返回键）。我只有三页，减去实际我有两个环节，所以把他们的头对我来说是一种选择。太遗憾了 ！但它的工作原理，这是必要的; - ）

EDIT : Okay, I have read a lot of pages on internet, and it seems that the overflow is not supported as I would (and many others...). So I decided to put my menu links on the header, inline with the header title (like "Back" button on iOS). I have only three pages, minus actual I have two links, so putting them on the header is for me an alternative. What a pity ! But it works and this is the essential ;-)

推荐答案

我有同样的问题在我的HTC Desire。试试这个：

I had the same problem on my HTC Desire. Try this:

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

这篇关于PhoneGap的+ JQM Android的滚动发行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！