6

モバイル Web アプリの下部にツールバーがあります。このツールバーを上下にドラッグして、その下のコンテンツを表示できるようにしたいと考えています。タッチ/スクロール イベントやモバイル タッチ/スクロール ライブラリを使用する必要がなく、HTML/CSS を使用するだけでこれを簡単に実行できるようにしたいと考えています。

メインのウェブアプリの上にスクロール要素を重ねてツールバーとそのコンテンツを下部に配置することで、これを実行しようとしています。z-indexユーザーがメイン コンテンツを操作するのをブロックしないように、この要素をメイン コンテンツよりも低くし、ツールバーとそのコンテンツz-indexを表示してプル/スクロールできるように高くしました。

Chrome のデスクトップ バージョンと Android バージョンの両方で正しい動作をする jsFiddle を作成しました。指でツールバーを上にドラッグするか、ツールバーの上にカーソルを置いてスクロールできます。

残念ながら、ツールバーは Android ブラウザーには表示されません (4.1 および 4.2 でテスト済み)。

ただし、ツールバーがあるべき場所を押して上にドラッグすると、ツールバーが表示されている場合は、ツールバーを完全にスクロールするのに十分な距離まで指を動かすまで、ページはスクロールしません。これは、ツールバーのスクロールが 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;
}

ツールバーの high を無視することを決定しているため、Android ブラウザーでは動作しないと思いz-indexますz-index。

いずれにせよ、Android ブラウザーで動作するようにこれを変更する方法を知っている人はいますか?また、HTML/CSS だけで目的を達成するために使用できる他のレイアウト スキームはありますか?

4

1 に答える 1

1

エミュレータで例をテストしました。次を追加してみてください。

z-index: 2;

あなたの#scrollerに：

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

私のためにうまくいった

＃main-contentにz-indexが必要なのはなぜですか？#scrollerにz-indexを追加しなくても機能するよりも、スキップできる場合。

于 2012-12-11T10:40:30.810 に答える