PhoneGap + JQM Android прокрутки проблема - PullRequest
Новая
       13

PhoneGap + JQM Android прокрутки проблема

2 голосов
/ 22 февраля 2012

Я новичок в StackOverflow, но я читаю много постов, когда гуглюсь; -)

Я разрабатываю веб-приложение с помощью PhoneGap + jQuery Mobile и у меня проблема с прокруткой на 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.?.? - точно не помню), но отлично работает на моем Samsung Galaxy Nexus (Android 4.0.2).

Не знаю почему, и яВ поисках решения ... Я провел несколько тестов и обнаружил, что если я не использую переполнение, страница прокручивается, но мой нижний колонтитул не фиксируется в нижней части экрана, и я бы зафиксировал заголовок / content /нижний колонтитул с прокручиваемым содержимым.

РЕДАКТИРОВАТЬ: Хорошо, я прочитал много страниц в Интернете, и кажется, что переполнение не поддерживается, как я (и многие другие ...).Поэтому я решил поместить ссылки на меню в заголовок, в соответствии с заголовком заголовка (например, кнопка «Назад» на iOS).У меня всего три страницы, за исключением фактической, у меня есть две ссылки, поэтому размещение их в заголовке является для меня альтернативой.Как жаль !Но это работает, и это важно; -)

Ответы [ 2 ]

2 голосов
/ 11 декабря 2012

У меня была такая же проблема на моем 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;
        }
}
1 голос
/ 23 февраля 2012

Используйте плагин iscroll 4, если вам действительно нужна прокрутка.Он работает на многих ОС, ускоряет разработку и позволяет вам много контролировать.http://cubiq.org/iscroll-4

...