Прокрутка JQuery Mobile Panel отдельно от контента

Question

Прокрутка JQuery Mobile Panel отдельно от контента

Я работаю над мобильным приложением HTML 5 с помощью JQuery Mobile. Дизайн требует меню боковой панели, которое может прокручиваться независимо от основного содержимого, поэтому, например, вы можете прокрутить где-нибудь на странице, открыть меню и прокрутить в этом меню без прокрутки содержимого страницы.

Для реализации меню очевидным выбором были слайд-панели JQuery Mobile. Однако я не смог заставить их прокручиваться отдельно от контента.

Я пытался использовать iScroll 4 с и без плагина iScrollView для прокрутки слайд-панели JQuery Mobile, но прокрутка не работает на панели, только для элементов в содержимом страницы. Содержимое панели можно сдвинуть и вытянуть, но оно вернется в исходное положение (эффект "резиновой ленты").

Я также пытался использовать jScroll для нацеливания на div, созданный мобильным JQuery (".ui-panel-inner"), но у него были те же результаты.

призвание refresh() на объекте iScroll после показа панели тоже не получилось.

Я собираюсь забыть об использовании встроенных слайд-панелей JQuery Mobile для этой цели. Кто-нибудь знает решение для прокрутки панели JQuery Mobile независимо от элемента содержимого?

16

jquery-mobile iscroll4

Источник

user1739568 30 апр '13 в 17:16

5 ответов

Другие вопросы по тегам jquery-mobile iscroll4

user1551741 19 июн '13 в 17:30 2013-06-19 17:30 · Answer 1 · 2013-06-19 17:30

Это сводило меня с ума также. Я использовал решение на этом форуме ответ

Добавьте этот CSS после таблицы стилей JQueryMobile:

    .ui-panel.ui-panel-open {
        position:fixed;
    }
    .ui-panel-inner {
        position: absolute;
        top: 1px;
        left: 0;
        right: 0;
        bottom: 0px;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }

user2645613 31 окт '13 в 08:42 2013-10-31 08:42 · Answer 2 · 2013-10-31 08:42

  .ui-panel.ui-panel-open {
    position:fixed;
}
.ui-panel-inner {
    position: absolute;
    top: 1px;
    left: 0;
    right: 0;
    bottom: 0px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

Это решение, предоставленное Элисон Тинкер. Чтобы запретить показ свитка, когда прокручивать нечего, измените его;

overflow: scroll;

в

overflow: auto;

8

Источник

user2645613 31 окт '13 в 08:42

user2427628 28 май '13 в 08:10 2013-05-28 08:10 · Answer 3 · 2013-05-28 08:10

У меня с тобой похожий случай. Мне нужно статичное меню на левой боковой панели. Я не хочу панель, прокрутка.

Затем я использую data-position-fixed="true",

4

Источник

user2427628 28 май '13 в 08:10

user2842414 06 авг '14 в 09:36 2014-08-06 09:36 · Answer 4 · 2014-08-06 09:36

Я думаю, что вы должны исправить содержимое, когда панель открыта

чтобы проверить, открыта ли панель, у вас есть этот класс, добавленный в BODY .ui-panel.ui-panel-open

Вы должны установить положение: фиксировано! Важно; к.ui-panel-wrapper под.ui-panel.ui-panel-open

0

Источник

user2842414 06 авг '14 в 09:36

user1849478 12 ноя '14 в 12:10 2014-11-12 12:10 · Answer 5 · 2014-11-12 12:10

Пожалуйста, обратитесь к моему решению, используя динамические настройки CSS, запущенные с помощью panelbeforeopen / panelbeforeclose, используя приведенную выше таблицу стилей для внутренней панели.

$(document).on("panelbeforeopen", "#panel", function () { $(".ui-panel").css({ "overflow": "hidden" }); $(".ui-content").css({ "overflow": "hidden", "position": "fixed" }); }).on("panelbeforeclose", "#panel", function () { $(".ui-panel").css({ "overflow": "hidden" }); $(".ui-content").css({ "overflow": "scroll", "position": "absolute" }); });

http://jsfiddle.net/ohxdtwga/

Прикрепленное обновление нижнего колонтитула:

http://jsfiddle.net/u92m7u2n/