Przewiń panel mobilny JQuery oddzielnie od treści

Question

Pracuję nad aplikacją mobilną HTML 5, używając JQuery Mobile. Projekt wymaga menu paska bocznego, które można przewijać niezależnie od głównej treści, więc na przykład można przewijać gdzieś na stronie, otwierać menu i przewijać w tym menu bez przewijania zawartości strony.

Aby zaimplementować menu, panele przesuwne JQuery Mobile były oczywistym wyborem. Jednak nie udało mi się zmusić ich do przewijania oddzielnie od treści.

Próbowałem używać iScroll 4 zi bez wtyczki iScrollView do przewijania panelu slajdów JQuery Mobile, ale przewijanie nie działa w panelu, tylko na elementach w treści strony. Zawartość panelu można pchać i ciągnąć, ale zostanie przywrócona do pozycji początkowej (efekt "gumki").

Próbowałem również użyć jScroll do kierowania div, który jest tworzony przez komórkę JQuery (".ui-panel-wewnętrzny"), ale miał takie same wyniki.

Wywołanie refresh() na obiekcie iScroll po wyświetleniu panelu również nie działa.

Mam zamiar zapomnieć o użyciu wbudowanych paneli przesuwnych JQuery Mobile, aby to zadziałało, czy ktoś wie o rozwiązaniu do przewijania panelu JQuery Mobile niezależnie od div zawartości?

Answer 1

Mam podobny przypadek z tobą. Potrzebuję statycznego menu po lewej stronie panelu. Nie chcę panelu, przewijanie.

Następnie używam data-position-fixed="true".

Answer 2

To także doprowadzało mnie do szaleństwa. Użyłem rozwiązanie na this forum response

Dodaj CSS po arkusza 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; 
    } 

Answer 3

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

Jest to rozwiązanie dostarczone przez Alison Tinker. Aby zapobiec wyświetlaniu przewijania, gdy nie ma niczego do przewinięcia, zmień;

overflow: scroll; 

do

overflow: auto; 

Answer 4

Chyba trzeba ustalić zawartość kiedy panel jest otwarty

aby sprawdzić, czy panel jest otwarty, u zostały dodane do tej klasy CIAŁA .ui- panel-panel-otwórz-otwórz

Musisz ustawić pozycję: fixed! important; important; do panelu .ui-panel-wrapper pod .ui-panel.ui-panel-open

Answer 5

Proszę odnieść się do mojego rozwiązania za pomocą dynamicznych ustawień css wyzwalanych przez panelbeforeopen/panelbeforeclose przy użyciu powyższego arkusza stylów dla panelu wewnętrznego.

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

naklejane zmiana stopki:

http://jsfiddle.net/u92m7u2n/