Scrollen JQuery Mobile Panel separat von Inhalt

Ich arbeite an einer HTML 5 Mobile App mit JQuery Mobile. Das Design erfordert ein Sidebar-Menü, das unabhängig vom Hauptinhalt rollen kann. Sie können also beispielsweise auf der Seite blättern, das Menü öffnen und in diesem Menü blättern, ohne dass der Seiteninhalt gescrollt wird.Scrollen JQuery Mobile Panel separat von Inhalt

das Menü zu implementieren, waren JQuery Mobile-Dia-Panels eine offensichtliche Wahl. Ich war jedoch nicht in der Lage, sie vom Inhalt getrennt zu scrollen.

Ich habe versucht, iScroll 4 mit und ohne iScrollView Plugin zum Scrollen eines JQuery Mobile-Folie-Panel, aber das Scrollen funktioniert nicht im Panel, nur auf Elemente im Seiteninhalt. Der Inhalt des Panels kann gedrückt und gezogen werden, springt jedoch in seine Ausgangsposition zurück (der "Gummiband" -Effekt).

Ich habe auch versucht mit jScroll auf das div, das von JQuery mobile (".ui-Panel-inneren") erstellt, aber das hatte die gleichen Ergebnisse.

Aufruf refresh() auf dem iScroll Objekt nach der Platte zeigt auch funktionierte nicht.

Ich bin dabei zu vergessen, die eingebauten JQuery Mobile Slide Panels zu verwenden, um dies zu tun, weiß jemand eine Lösung zum Scrollen eines JQuery Mobile-Panel unabhängig von der Content div?

Quelle

2013-04-30 Kirkpatrick

Ich habe ähnliche Fälle mit Ihnen. Ich brauche ein statisches Menü auf der linken Seite. Ich möchte das Panel nicht scrollen.

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

Quelle

2013-05-28 08:10:02 iqbal

Das funktioniert mich nicht ... – rkaartikeyan

Ich glaube, das das entgegengesetzte Problem löst - Scrollen der Seite, während die Platte zu fixieren. –

Das machte mich auch verrückt. Früher habe ich die Lösung auf this forum response

Fügen Sie diese CSS nach dem JQueryMobile Sheet:

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

Quelle

2013-06-19 17:30:50

Es zeigt immer die Bildlaufleiste, auch wenn es nicht überläuft, wie kann ich das lösen. –

Diese Lösung funktioniert nicht für mich. Wenn Haupt- und Bedienfeldüberlauf vorhanden sind, scrollen beide. –

Stellen Sie sicher, dass Sie ein Element mit der Klasse 'ui-panel-intern' hinzufügen, weil das nicht standardmäßig eingefügt wird. –

.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 Tinker zur Verfügung gestellt. Um zu verhindern, dass Scroll angezeigt wird, wenn nichts gescrollt wird, ändern Sie;

overflow: scroll;

overflow: auto;

Quelle

2013-10-31 08:42:03 Diamond

Ich glaube, Sie haben den Inhalt zu beheben, wenn die Platte offen ist

zu überprüfen, ob die Platte offen ist, u haben diese Klasse zu BODY hinzugefügt .ui- panel.ui-Panel-open

Sie haben Position einstellen: Fest wichtig; zum .ui-panel-wrapper unter dem .ui-panel.ui-panel-open

Quelle

2014-08-06 09:36:01

Bitte beziehen Sie sich auf die dynamischen css-Einstellungen, die mit panelbeforeopen/panelbeforeclose ausgelöst wurden, indem Sie das obige Stylesheet für das innere Panel verwenden.

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

Sticked Fußzeile Update:

http://jsfiddle.net/u92m7u2n/

Quelle

2014-11-12 12:10:56 metamagicson

Scrollen JQuery Mobile Panel separat von Inhalt

Antwort

Verwandte Themen