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

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

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

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

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

IE7 は、元々ブラウザ側で、常時スクロールバーが出るようになっていたので、特にテストはしていません。

環境は Windows Vista で、テストしたブラウザは以下の通り。

まず最初に、すぐ思いつく方法として 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 を使う方法よりは、効果があるブラウザが多いやり方だということが分かりました。

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