web-dev-qa-db-ja.com

ブラウザのスクロールバーは私の固定divの下にあります

100％幅のヘッダーが固定されています。

#header {
background: #2e2e2e;
width: 100%;
z-index: 999;
position: fixed;
}

ブラウザのスクロールバーは、私の固定divの下にあります。それを修正する方法は？

scrollbar

csscss-position
46
LifeIsShort

その理由は、overflow-x: hidden; base.css行番号9

body {
    color: #444444;
    font: 13px/20px Arial,Helvetica,sans-serif;
    overflow-x: hidden; // remove this 
}
36
NullPoiиteя

これは、ボディのオーバーフローを追加することで解決できます

から

overflow:auto;

に

overflow:auto;
overflow:initial;

これはあなたの問題です

スクロールが本文に設定されている場合、本文>ラッパー>ヘッダー（固定位置）として構成されている場合、コンテンツなど

以下はあなたの解決策です

問題の解決策

注：これはbodyでのみ機能しますが、スクロールのあるdivコンテナでは機能しません。 z-indexを使用して機能させることもできますが、正しく機能させるためにz-indexを指定して他の要素をスタックします。

お役に立てれば..：）

9
mike tracker

この問題は、bodyタグのoverflow-xにはありません。 htmlタグのoverflow-xおよびoverflow-yが原因です。これをHTMLタグから削除すると、自分の体に必要なオーバーフローを置くことができます。

これは次の場合に発生します。

  • overflow-xは、auto、hidden、overflow、またはscrollのいずれかに設定されます
  • overflow-yは、auto、hidden、_-webkit-paged-x、または-webkit-paged-yのいずれかに設定されます

overflowが両方を設定するため、overflow-xまたはoverflow-yを明示的に呼び出す必要はありません。

私はChrome 67です。

5
NonameSL

これについてのcssハック（私はついに方法を見つけました）はあまり説明があまりありませんでした-最初のフロート要素です。以下のコードから、原理がどのように機能するかを理解したいと思います。

更新：また、モバイルブラウザで問題がないかどうかを評価するために、以下を参照してください。

<div style="position: fixed;top: 0;width: 100%;left: 0;z-index: 100000;height: 200px;background: #f00;">

<div id="aaaaa" style="display: block;float:right;color: #000;overflow-y:scroll;min-height:20px;top: -100px;background: #0f0;border: 1px solid #0f0;"></div>
<div id="bbbb" style="display: block;position:relative;color: #000;overflow:hidden;min-height:20px;background: #f0f;border: 1px solid #00f;">sdfasdf sdfas s as as fasd fasd fasdfasd fasd asdf asd fasdf sadf asdf asdf asdf sad fasdf asdf asdf asd fasdf asdf asdf asd fsad sad sfd

        <div style="width: 100%;height: 20px;background: #5ff"></div>

</div>

そして、最終的なコードは、目に見えるものや動作したいものとほぼ同じです

<div style="position: fixed;top: 0;width: 100%;left: 0;z-index: 100000;height: 0px;overflow:visible;background: #f00;">

<div id="aaaaa" style="display: block;float:right;color: #000;overflow-y:scroll;visibility:hidden;min-height:20px;top: -100px;background: #0f0;border: 1px solid #0f0;"></div>
<div id="bbbb" style="display: block;position:relative;color: #000;overflow:hidden;min-height:20px;background: #f0f;border: 1px solid #00f;">sdfasdf sdfas s as as fasd fasd fasdfasd fasd asdf asd fasdf sadf asdf asdf asdf sad fasdf asdf asdf asd fasdf asdf asdf asd fsad sad sfd

        <div style="width: 100%;height: 20px;background: #5ff"></div>

</div>

重要なのは、モバイルブラウザーとデスクトップブラウザーで動作することです。実際のところ、私はコンピューターをタブレットモードに変更してからデスクトップモードに変更したときに、Windows Edgeでモバイルをテストしました。その後、コードは常に機能します。チェックするのは、これがdiv id = "aaaa"の代わりに：beforeで動作して、よりCSS純粋で追加のdivが独立するようにするかどうかです。

更新：タブレットモードに入るときにEdgeブラウザがスクロールバーを変更しないため、以前はうまく動作しませんでした。

Bbbb要素の非表示のコンテンツで問題が発生した場合は、bbbbコンテナに絶対/固定要素を配置しないようにしてください。

すべての状況とブラウザでまだテストしていません。

更新：言及された問題この答えの上のどこか-しかし、スクロールバーは動的であるため、モバイルブラウザではスクロールバーが覆われています-スクロールしてコンテナの一部ではないことがわかったときにのみ表示されます。スクロールバーはおそらくすべてのブラウザでかなり薄いので、どうするかを決める必要があります。たぶん5ピクセル程度のマージンでしょうか？

2
OpenEX

この問題が発生し、スクロールバーは固定ヘッダーの下にあり、htmlタグから削除した後、これを解決しましたheight: 100%;そして、同じ結果が得られるように他の特性を追加しました。他の解決策のどれも私を助けませんでした。これが誰かの助けになることを願っています。

1
Madalina Taina

反応アプリでも同じ問題がありました。

overflow-y: scrollスタイルを#rootからbodyセレクターに移動しました。問題を解決しました。

0
Nikita

これは、以下の2つの方法を使用して解決できます。

1.最初にscrollbarWidth=el.offsetWidth - el.clientWidthを計算します

2.固定div left=scrollbarWidthを設定します

0
Tony Benjamin