スクロールバーを常に表示させる方法

スクロールバーの分だけページ表示部分の幅がズレます、というお話。

スクロールバーの有無でセンタリング位置がズレる

Firefox などのブラウザでは、ページが1画面に収まったときはスクロールバーを非表示にし、複数ページにわたった場合のみスクロールバーを表示する、という形になっているものがあります。

これには問題があって、スクロールバーがあるときとないときで、スクロールバーの分だけ画面の幅が変わってしまうので、ページを移動したときにセンタリング位置がズレてしまいます。

この問題は、常時スクロールバーを出しておくように指定すれば解決できます。そのやり方を説明します。

テストしたブラウザ

環境は Windows Vista で、テストしたブラウザは以下のとおり。IE7 は、もともとブラウザ側で常時スクロールバーが出るようになっていたので対象にはしていませんが、一応表示確認しました。

  • Mozilla Firefox 2.0
  • Safari 3.0.3
  • Opera 9.24
  • Netscape 7.1

overflow-y:scroll を使う方法

まず最初に、すぐ思いつく方法として overflow-y:scroll を使う方法です。縦スクロールバーのみを常時表示させる、という指定を html 要素に対して行います。

html {
    overflow-y:scroll;
    }

実際の表示は、CSS Happy Lifeサンプルページなどをご覧ください。

結果

  • IE7 は当然 OK。
  • Firefox と Safari はスクロールバーが出ました。
  • Opera と NN では効果がありませんでした。

Opera と NN で効果がない理由

Opera と NN で、このやり方で効果がなかったのはなぜでしょうか。

実は、overflow-y プロパティはもともと IE の独自拡張で、CSS3 で正式に採用されることになっており、Firefox ではそれに先駆けて独自に実装していたのです。

だから、overflow-y を実装していない Opera と NN では、効果がなかったのです。

height:100%; margin-bottom:1px; という方法

では、別の方法です。html 要素の高さを 100% にし、そこに margin-bottom で余白を作ります。100% + 1px なら、必ず1画面以上の大きさになりますね。

html {
    margin-bottom:1px;
    height:100%;
    }

結果

このやり方では、すべてのブラウザでスクロールバーが常時表示されました。 overflow-y:scroll を使う方法よりは、効果があるブラウザが多いやり方だということが分かりました。

ちなみにこのサイトでは、現在この方法を使っています。