CSSでスクロールバーを常に表示しておく方法

様々なページを作成していると、ページ毎にコンテンツの容量に違いが出てきます。そうすると、縦の長さの違いに伴って、スクロールバーが表示されているページと、されていないページを行き来することで、表示の際にガタつきが生じます。

スクロールバーが必要なページのスクロールバーを消してしまうと、コンテンツが全て見れなくなってしまう為、スクロールバーが必要な方に合わせるのが一般的です。

つまり、画面を統一させるために、スクロールバーが自動で出ないサイズのページにも、スクロールバーを常に表示させる必要があります。

CSSで常にスクロールバーを表示する

css内でこの様な記述を追加するだけで、簡単に、コンテンツのサイズにかかわらず常にスクロールバーを表示させることが可能です。

例を見てみましょう。

今回はページではないですが、ページだと考えてみてください。この様に、コンテンツが入りきっている場合は、スクロールバーは表示されません。

そこで、先ほどのoverflow-y: scroll; を追記してみます。

スクロールバーが表示されました。今回は主にページに必要という話でご紹介しましたが、この様に他の要素にも活用できるので、是非覚えておきましょう。

また、以下の様に記述することで、スクロールバーを非表示に設定することもできます。

ただ、スクロールバーを表示させないと、コンテンツによっては見ることができなくなってしまう部分が出てきてしまうことがある為、利用の際は慎重に検討する必要があります。