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

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

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 を使う方法よりは、効果があるブラウザが多いやり方だということが分かりました。

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