0

私のサイトには、画面幅の 100% のコンテナーがあり、独自のスクロールバーを使用していoverflow: autoます。私のサイトには標準のスクロールバーが表示されず、代わりにこれを使用しています。これは、サイトのメイン レイヤーの背後に別のレイヤーがあり、独自のスクロールバーもあるからです (ここで私のサイトを表示し、ブログ投稿をクリックして意味を確認してください)。 .

画面の上部に固定したい青いバーがあります。これは、そのように配置するという点では簡単ですposition: fixedが、バーの幅は画面幅の 100% である必要があり、バーが親コンテナーに適用されるスクロールバーと重なることがわかりました。

これが私が何を意味するかを示すjsFiddleです： http://jsfiddle.net/xUTR2/1/

スクロールバーの幅に基づいてバーを左にオフセットすることだけを考えましたが、さまざまなブラウザ間でスクロールバーの幅を推定することに頼ることはできないと判断しました。スクロールバーなし。

スクロールバーを強制的に上にレンダリングする明白な方法はありますか?

4

3 に答える 3

0

固定として配置するものはすべて、メイン ブラウザーのコンテキスト内 (およびスクロールバー内) で行われるため、クリーンで堅牢な方法でこれを達成することは不可能ですが、本体のスクロールバーを削除したためです (そして、その上にz-index位置を配置できないため）何もないと思われますが、その下にこのdivがあるため、2つの要素に固定マージンと高さを使用するか、JavaScriptメソッドを使用するしかありませんトップdivの正しい幅を決定します。

于 2012-10-04T07:53:11.317 に答える
0

あるイベントで、jquery で簡単にこれを行うことができます。

 $("body").load(function () {
    $('scrollable container').css('overflow-y', 'auto');
 });

青いバーと他のページ コンテンツを別々のコンテナーに保持してみてください。問題が解決すると思います。

于 2012-10-04T07:10:12.157 に答える
0

まだコメントできないので、答えを出さなければなりません。
正しい場合は、スクロールダウン中に表示されるように、上部の青いバーを固定位置に配置したいと考えています。

個人的には、別のコンテナ
を次のように作成します

<div id='page'>
    <div id='bluebar'></div>
    <div id='content'></div>
</div>

デモはここにあります ( http://limpid.nl/lab/css/fixed/header )

于 2012-10-04T07:10:43.747 に答える