Podciąganie paska narzędzi za pomocą tylko HTML i CSS w przeglądarce Androida

Question

Mam pasek narzędzi na dole mojej mobilnej aplikacji internetowej. Chciałbym móc przeciągać ten pasek narzędzi w górę iw dół, ujawniając zawartość pod nim. Chciałbym móc to zrobić po prostu za pomocą HTML/CSS i bez konieczności używania zdarzeń dotykowych/przewijania lub mobilnych bibliotek dotykowych/przewijania.

Próbuję to zrobić nakładając przewijany element na główną aplikację Webapp z paskiem narzędzi i zawartością na dole. Dałam temu elementowi niższą z-index niż główną treść, aby nie blokowała on interakcji użytkownika z główną treścią, a pasek narzędzi i jego zawartość były wyższe o z-index, dzięki czemu można je zobaczyć i przeciągnąć/przewinąć w górę .

I have created a jsFiddle ma prawidłowe działanie zarówno w wersjach Chrome na komputery i Androida. Mogę przeciągnąć się pasek z moim palcem lub przewijając z mojego kursora na wierzchu:

Niestety, pasek narzędzi nie pojawia się w przeglądarce Android (testowane na 4.1 i 4.2).

Jednak po naciśnięciu gdzie pasek narzędzi powinien być i przeciągnij w górę, nie przewijać stronę, dopóki nie przeniósł palec na tyle daleko, że przewijany pasek aż do góry, jakby to było widoczny. W ten sposób przewijanie paska narzędzi działa w Chrome i wskazuje, że pasek narzędzi przewija się poprawnie w przeglądarce Androida. Po prostu nie jest widoczny.

<div id="main-content"></div> 
<div id="scroller"> 
    <div id="wrapper"> 
     <div id="toolbar-and-content"> 
      <div id="toolbar">Toolbar</div> 
      <div id="toolbar-content">Toolbar content</div> 
     </div> 
    </div> 
</div> 

#main-content { 
    position:relative; 
    width:100%; 
    height:300px; 
    background-color:green; 
    z-index:1; 
} 
#scroller { 
    position:absolute; 
    top:0; 
    width:100%; 
    height:300px; 
    overflow:auto; 
} 
#wrapper { 
    position:relative; 
    width:100%; 
    height:500px; 
} 
#toolbar-and-content { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:250px; 
    z-index:2; 
} 
#toolbar { 
    width:100%; 
    height:49px; 
    border-bottom:1px solid black; 
    background-color:red; 
} 
#toolbar-content { 
    width:100%; 
    height:200px; 
    background-color:orange; 
} 

ja figura to nie działa na Android przeglądarce ponieważ postanawia zignorować pasek narzędzi Wyższej z-index, ponieważ jest to w elemencie z niższą z-index.

Tak czy inaczej, czy ktoś wie, w jaki sposób mogę to zmienić, aby działał w przeglądarce Androida i/lub czy istnieją inne schematy układów, których mogę użyć do osiągnięcia tego, co chcę, tylko za pomocą HTML/CSS?

Answer 1

I przetestowaniu przykład w emulatorze, spróbuj dodać:

z-index: 2; 

do #scroller:

#scroller { 
    position:absolute; 
    top:0; 
    width:100%; 
    height:300px; 
    overflow:auto; 
    z-index: 2; // NEW 
} 

Pracował w porządku dla mnie

dlaczego trzeba z-index na # główna zawartość? Jeśli mógłbyś go pominąć, to działałby nawet bez dodatkowego z-index na #scroller.