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

Question

私は100％幅の固定ヘッダーを持っています。

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

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

Answer 1

その理由はoverflow-x: hidden;、base.cssの行番号9にあるからです。

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

Answer 2

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

から

overflow:auto;

に

overflow:auto;
overflow:initial;

これはあなたの問題です

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

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

問題の解決策

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

お役に立てれば..：）

Answer 3

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

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

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

両方を設定するため、overflow-xまたはへの明示的な呼び出しである必要はありません。overflow-yoverflow

私はWindows10を使用しているChrome67を使用しています。

Answer 4

これに対する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>

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

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

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

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

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

Answer 5

z-indexヘッダーとコンテンツの親であるコンテナにを設定します。

Answer 6

height:100%HTMLタグで削除

Answer 7

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

Answer 8

この問題を解決する方法は、スクロールバーの幅を設定してから、ナビゲーションバーからスクロールバーの幅を引いた値に100％の幅を設定することでした。

このような：

.main-container::-webkit-scrollbar {
  width: 8px;
}

.navbar{
    display: flex;
    position: fixed;
    width: calc(100% - 8px);
    height: 8rem;
    z-index: 5000;
}

こんな感じ

Answer 9

clip-pathプロパティが役立ちます。

ただし、スクロール可能なコンテンツ内にヘッダーを配置する必要がありますが、位置が固定されているため、問題ありません。次に、clip-path: inset(0 0 0 0);コンテナに適用すると、この長方形の外側のすべてが切り取られます。

function toggle() {
  content.classList.toggle('clip');
}

#container {
  overflow-y: auto;
  width: 300px;
  height: 100px;
  padding: 0;
}
#fixed {
  position: fixed;
  left: 0;
  top: 0;
  width: 350px;
  height: 50px;
  background: blue;
}
#content {
  height: 1000px;
  width: 100%;
  background: yellow;
}
#content.clip {
  clip-path: inset(0 0 0 0);
}

<div id="container">
  <div id="content">
    <div id="fixed"></div>
  </div>
</div>
<button onclick="toggle()">toggle clip-path</button>

Answer 10

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

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

Answer 11

これは、次の2つの方法で解決できます。

1.最初にscrollbarWidth=el.offsetWidth - el.clientWidth

2.固定セットdiv left=scrollbarWidth

Answer 12

topNavBarmargin-right: 0px;は私のために働きます