Scroll JQuery Mobile Panel Separat Von Inhalten

Ich arbeite an einer HTML 5 mobile-app mit JQuery Mobile. Das design erfordert eine sidebar-Menü, Blättern können unabhängig von der Haupt-Inhalt, zum Beispiel können Sie scrollen, irgendwo auf der Seite, öffnen Sie das Menü und Blättern Sie in diesem Menü, ohne den Inhalt zu scrollen.

Implementieren Sie das Menü, JQuery Mobile-slide-Platten wurden eine offensichtliche Wahl. Jedoch, ich habe nicht in der Lage, Sie zu erhalten, um zu Blättern getrennt von den Inhalten.

Ich habe versucht, mit iScroll 4 mit und ohne iScrollView plugin scrollen JQuery Mobile-slide-panel, aber das scrolling funktioniert nicht in der Systemsteuerung nur auf Elemente in den Inhalten der Seite. Die panel-Inhalt kann geschoben oder gezogen werden, sondern wird-snap zurück zu seiner Ausgangsposition (die "rubber band" - Effekt).

Habe ich auch versucht, mit Hilfe jScrollum das Ziel-div-Element, das erstellt wird, durch JQuery mobile (".ui-panel-inner"), aber das hatte die gleichen Ergebnisse.

Aufrufen refresh() auf der iScroll Objekt nach zeigt das panel hat auch nicht funktioniert.

Ich bin, zu vergessen, über die Verwendung des eingebauten JQuery Mobile-slide-Platten, um diese Arbeit zu machen, kennt jemand eine Lösung zu scrollen JQuery Mobile panel unabhängig vom content-div?

InformationsquelleAutor der Frage Kirkpatrick | 2013-04-30

  1. 21

    Diese wurde driving me crazy als gut. Ich benutzte die Lösung auf in diesem forum Antwort

    Hinzufügen dieser CSS nach dem JQueryMobile stylesheet:

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

    InformationsquelleAutor der Antwort Alison Tinker

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

    Dies ist die Lösung von Alison basteln. Um zu verhindern, dass die Schriftrolle zu zeigen, wenn es nichts zu scrollen, ändern;

    overflow: scroll;

    zu

    overflow: auto;

    InformationsquelleAutor der Antwort Diamond

  3. 4

    Ich habe ähnlichen Fall mit Ihnen.
    Ich brauche ein statisches Menü auf der linken Seite.
    Ich will nicht das panel, scrollen.

    Dann verwende ich data-position-fixed="true".

    InformationsquelleAutor der Antwort iqbal

  4. 0

    Ich glaube, Sie haben zu beheben, den Inhalt, wenn das panel geöffnet ist

    überprüfen, wenn das panel geöffnet ist , u haben, werden dieser Klasse Hinzugefügt KÖRPER .ui-panel.ui-panel-open

    Müssen Sie die Einstellung position : fixed !wichtig; die .ui-panel-wrapper unter der .ui-panel.ui-panel-open

    InformationsquelleAutor der Antwort Mejri Yassine

  5. 0

    Bitte meine Lösung mit dynamischen css-Einstellungen ausgelöst mit panelbeforeopen/panelbeforeclose mithilfe der obigen stylesheet für das innere panel.

    $(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/

    Geklebt Fußzeile aktualisieren:

    http://jsfiddle.net/u92m7u2n/

    InformationsquelleAutor der Antwort metamagicson

Schreibe einen Kommentar