モバイルWebアプリケーションの下部にツールバーがあります。このツールバーを上下にドラッグして、その下にコンテンツを表示したいと考えています。 HTML/CSSを使用し、タッチ/スクロールイベントやモバイルタッチ/スクロールライブラリを使用する必要がないため、これを簡単に実行できるようにしたいと考えています。AndroidブラウザでHTMLとCSSのみを使用するプルアップツールバー
私は、メインのwebappの上にスクロールする要素を、ツールバーとその内容を下に重ねて表示しようとしています。私はこの要素に主コンテンツよりも低いz-indexを与えて、ユーザが主コンテンツとのやりとりを妨げないようにし、ツールバーとそのコンテンツがより高いz-indexを与えられているので、それを見て引っ張ったり/ 。
I have created a jsFiddle Chromeのデスクトップ版とAndroid版の両方で正しく動作しています。私は私の指でまたはその上に私のカーソルでスクロールして、ツールバーをドラッグすることができます。
残念ながら、ツールバーが（4.1と4.2でテスト）Androidのブラウザでは表示されません。
しかし、私はツールバーが可能と上にドラッグしなければならないところ、それがなかった場合、私は、すべての方法まで、ツールバーをスクロールしていると私の指が十分に移動するまで、それはページをスクロールしない押したとき可視。これはChromeでツールバーをスクロールする方法で、ツールバーがAndroidブラウザで正しくスクロールしていることを示します。ただ見えません。
<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;
}
私はそれはz-index下での要素でだから、z-indexツールバーの高いを無視することを決定されているので、それはAndroidのブラウザでは動作しません把握。
いずれにしても、私はこれを変更してAndroidブラウザで動作するようになるかもしれないと知っていますか？またはHTML/CSSだけで何ができるかを達成するために他のレイアウトスキームがありますか？
z-index: 2;
あなた#scrollerに：