web-dev-qa-db-ja.com

メインスクロールバーを常に表示する

ユーザーがWebページにアクセスしたとき（ページにスクロールバーのアクティベーションをトリガーするのに十分なコンテンツがないとき）、ブラウザの垂直スクロールバーを表示したままにするために必要なCSSは何ですか？

htmlcssxhtml
170
Deniz Dogan
html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

これにより、スクロールバーは常に表示され、必要な場合にのみアクティブになります。

更新：上記が機能しない場合は、これを使用してください。

html {
    overflow-y:scroll;
}
306
Corv1nus
html {
    overflow-y: scroll;
}

それはあなたが望むものですか？

残念ながら、Opera 9.64はHTMLまたはBODYに適用される場合、そのCSS宣言を無視するようです。ただし、DIVのような他のブロックレベルの要素に対しては機能します。

24
Ionuț G. Stan

ここ数年で状況は変わりました。上記の回答は、すべての場合に有効ではありません。 Appleは、どこにでも 消えるスクロールバー を押しています。 Safari、Chrome、およびMacO（およびiO）上のFirefoxでさえ、実際にスクロールしているときのみスクロールバーを表示します—現在のWindows/IEについては知りません。ただし、Webkitには スクロールバー をスタイルする非標準の方法があります（IEはかなり前に廃止されました）。

22
Frank Lämmer

オーバーフローが「自動」ではなく「スクロール」に設定されていることを確認してください。 とはいえ、OS X Lionでは、「スクロール」に設定されたオーバーフローは、スクロールバーが使用されている場合にのみ表示されるという点で、自動のように動作します。したがって、上記のソリューションが機能していないように見える場合は、その理由が考えられます。

これはあなたがそれを修正するために必要なものです：

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

デフォルトが気に入らなければ、それに応じてスタイルを設定できます。

21
molls223

body { height:101%; }は、より大きなページを「トリミング」します。

代わりに、私は使用します：

body { min-height:101%; }
12
Scott
html {height: 101%;}

このクロスブラウザソリューションを使用します（注：DOCTYPE宣言は常に1行目で使用しますが、quirksmodeで動作するかどうかはわかりませんが、テストしません）。

これにより、常にアクティブな垂直スクロールバーが表示されますすべてのページで、垂直スクロールバーは数ピクセルしかスクロールできません。

ページの内容がブラウザの表示領域（ビューポート）よりも短いの場合、垂直スクロールバーがアクティブであり、数ピクセルしかスクロールできません。

このソリューションを使用して、CSS検証に取りつかれている場合（HTML検証のみに取りつかれています）、-moz-scrollbars-verticalなどの非標準CSS属性を使用していないため、CSSコードもW3Cに対して検証します

11
Marco Demaio

別の方法は、html要素の幅を100vwに設定することです。ほとんどではないにしても、多くのブラウザでは、これは幅に対するスクロールバーの効果を無効にします。

html { width: 100vw; }
2
lunelson

Bodyタグに追加することで、これを機能させることができました。 html要素には何も持っていないので、私にとってはよかったです。

body {
    overflow-y: scroll;
}
2
Jazzepi

高さを101％に設定することが私の問題の解決策です。ビューポートの高さを超えるページとそうでないページを切り替えるときに、ページが「フリック」しなくなりました。

0
Sanjaal Corps

次のコードをCSSスタイルシートに追加します。

html {overflow-y: scroll;}

それだけです！

0
iCrazybest