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

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

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

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

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

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

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

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

html {
    overflow-y:scroll;
    }

実際の表示は、CSS Happy Life のサンプルページなどを参照のこと。

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

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

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

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

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

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

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