iScroll с фиксированным нижним колонтитулом и заголовком - PullRequest
Новая
       37

iScroll с фиксированным нижним колонтитулом и заголовком

4 голосов
/ 13 января 2012

Если вы введете http://gizeto.se/app_yellow/index.html, вы увидите, что iScroll прокручивает всю страницу.Вы можете видеть скроллер, лежащий как над верхним, так и над нижним колонтитулом.Скроллер должен прокручивать только содержимое , не включая заголовок и нижний колонтитул.

Я не хочу, чтобы это работало, потому что мне нужен фиксированный нижний колонтитул без использования position: fixed - который до сих пор нене работает, например, на Android 2.1

Я использую iScroll 4, и мой JS-код находится внутри моей страницы data-role = "content": 

            $(document).ready(function() {

                var myScroll = new iScroll('content');
                $(window).bind('resize', function () {
                // I also tried setting a height on the content div, but that didn't work either. Its commented out.
                //$.mobile.activePage.children('[data-role="content"]').height('200px');

                    myScroll.refresh();

                });
            });

My data-role = "page"element имеет атрибут data-iscroll =" enable ", и мой HTML-код для прокручиваемой части: 

    <div data-iscroll="scroller" class="scroller">
        <div data-iscroll="scroller">
        <h3>Välkommen</h3>

        <div style="text-align:center;">
        <img src="images/video.png" style="width: 100%; height: 100px;" class="rounded" title="" />
        </div>
        <br />

            Ticker AB är en arkitekturbyrå som arbetar inom ett brett fält av projekt, från stadsplanering till bostäder via kontor och handel. Vår styrka ligger i våra idéer och vår förmåga att hitta nya, ofta oväntade lösningar som stärker platser och ökar fastigheters värde.      <br /><br />
            Vi följer den globala utvecklingen inom hållbar samhällsutveckling och arbetar aktivt för att integrera hållbara lösningar i alla våra projekt.


        </div>
    </div>

Почему iScroll прокручивает страницу отверстия, а не только содержимое, чтобы мой нижний колонтитул мог остатьсяполностью исправлено без использования позиции: исправлено, что пока не поддерживается во всех мобильных браузерах.

Ответы [ 3 ]

1 голос
/ 18 апреля 2012

возможно, попробуйте этот плагин виджета для более чистой интеграции iScroll и JQuery Mobile:

https://github.com/watusi/jquery-mobile-iscrollview

0 голосов
/ 21 января 2012

Простите, если это слишком очевидно, но только потому, что это не включено в ваш пример кода, я подумал, что спросить ... вы добавили id "content" в ваш data-role = "content" div? Это очевидно, каким должен быть ваш контейнер iscroll, но у содержимого div нет идентификатора div в документации jqmobile:

Jquery Начало работы

Если бы вы добавили этот идентификатор (что, наверняка, у вас есть), я бы обязательно прочитал приведенный выше комментарий Фила Паффорда о повторном использовании pageInit () вместо $ (document) .ready ().

0 голосов
/ 16 января 2012

На данный момент верхний и нижний колонтитулы не могут быть исправлены в мобильном приложении jquery, например iscroller. Причина этого заключается в том, что верхний и нижний колонтитулы размещаются внутри div страницы мобильного приложения jquery, где, как и в приложении iscroller, верхний колонтитул и нижний колонтитул не являются частью div страницы. Однако если мы попытаемся оставить верхний и нижний колонтитулы за пределами div страницы в мобильном приложении jquery, это может привести к ошибке, такой как отключение текстового поля и т. д.

...