Pull-up-Symbolleiste mit nur HTML und CSS in Android-Browser

Question

Ich habe eine Symbolleiste am unteren Rand meiner mobilen Webanwendung. Ich möchte in der Lage sein, diese Symbolleiste nach oben und unten zu ziehen und den Inhalt darunter zu enthüllen. Ich möchte dies einfach mit HTML/CSS tun können und keine Touch/Scroll-Ereignisse oder mobile Touch/Scroll-Bibliotheken verwenden müssen.

Ich versuche dies zu tun, indem ich ein scrollendes Element über der Hauptwebapp mit der Symbolleiste und seinem Inhalt an der Unterseite überlagert. Ich habe diesem Element einen niedrigeren z-index als den Hauptinhalt gegeben, so dass es den Benutzer nicht daran hindert, mit dem Hauptinhalt zu interagieren, und der Symbolleiste und ihrem Inhalt einen höheren z-index gegeben, so dass es gesehen und gezogen/gescrollt werden kann .

I have created a jsFiddle, die das richtige Verhalten sowohl in Desktop- als auch Android-Versionen von Chrome hat. Ich kann die Symbolleiste mit dem Finger nach oben ziehen oder mit meinem Cursor oben drauf Scrollen:

Leider ist die Symbolleiste nicht im Android-Browser (getestet auf 4.1 und 4.2) erscheinen.

Jedoch, wenn ich drücken, wo die Symbolleiste und ziehen sollte, ist es die Seite nicht scrollen, bis ich mit dem Finger weit genug bewegt haben, um den ganzen Weg bis die Symbolleiste geblättert zu haben, wenn es sichtbar. So scrollt die Symbolleiste in Chrome und zeigt an, dass die Symbolleiste im Android-Browser ordnungsgemäß gescrollt wird. Es ist einfach nicht sichtbar.

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

ich kapier nicht auf dem Android-Browser funktioniert, weil es die Symbolleiste höher ist die Entscheidung z-index, zu ignorieren, da sie mit einem niedrigeren z-index in einem Element ist.

Wie kann ich das ändern, damit es mit dem Android-Browser funktioniert und/oder gibt es andere Layout-Schemata, mit denen ich erreichen kann, was ich nur durch HTML/CSS erreichen möchte?

Answer 1

ich dein Beispiel in Emulator getestet, fügen Sie versuchen:

z-index: 2; 

auf Ihre #scroller:

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

für mich

fein gearbeitet Warum Sie z-Index auf # brauchen Hauptinhalt? Wenn Sie es einfach überspringen könnten, würde es sogar ohne zusätzlichen Z-Index auf #scroller funktionieren.