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

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

html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

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

更新：上記が機能しない場合は、これを使用するだけでかまいません。

html {
    overflow-y:scroll;
}

オーバーフローが「自動」ではなく「スクロール」に設定されていることを確認してください。そうは言っても、OS X Lionでは、「スクロール」に設定されたオーバーフローは、スクロールバーが使用されている場合にのみ表示されるという点で、autoのように動作します。したがって、上記の解決策が機能していないようであれば、それが原因である可能性があります。

これを修正する必要があります：

::-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);
}

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

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

html {
    overflow-y: scroll;
}

それでいいの？

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

html {height: 101%;}

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

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

ページのコンテンツがブラウザの表示領域（ビューポート）より短い場合でも、垂直スクロールバーがアクティブのままであり、スクロールできるのは数ピクセルのみです。

このソリューションを使用してCSS検証（私はHTML検証のみに夢中です）に夢中になっている場合は、次のような非標準のCSS属性を使用していないため、CSSコードもW3Cを検証します -moz-scrollbars-vertical

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

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

body { min-height:101%; }

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

body {
    overflow-y: scroll;
}

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

html { width: 100vw; }

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

body { 
    min-height: 101vh; 
} 

私に最適です

私はこれをします：

html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}

そうすれば、必要のないときは、醜くグレー表示されたスクロールバーを見る必要はありません。