Прокрутка JQuery Mobile Panel отдельно от содержимого

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

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

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

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

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

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

Ответ 1

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

Добавьте этот 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;
    }

Ответ 2

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

Ответ 3

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

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

Ответ 4

Думаю, вам нужно зафиксировать контент, когда панель открыта.

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

Вы должны установить позицию: fixed! important; на .ui-panel-wrapper под открытой панелью .ui-panel.ui-panel

Ответ 5

Пожалуйста, обратитесь к моему решению, используя динамические настройки css, запущенные с помощью панелиbeforeopen/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/