スクロールバーの出現によるガタつきを防ぐCSS

なぜ表示がガタつくのか

理由は簡単で以下の画像のようになります。

web ページの描画が始まると上から順に要素を構成していきます。図の状態ではブラウザはウィンドウから要素がはみ出していないのでスクロールバーを作りません。赤い線がスクロールバーがない時の中心線です。

ブラウザは要素全体がウィンドウの高さより初めて高くなった時にスクロールバーを表示します。青い線がスクロールバーば出現した結果の中心線です。元の赤い中心線より左にずれます。

ブラウザの幅は固定なのでスクロールバーがあることによってウィンドウの中の幅が変わります。スクロールバーがない状態からある状態に変わり中心がずれた結果、中央寄せにしていた要素の位置がずれるということです。

スクロールバーなし・・・1920px

スクロールバーあり・・・1903px

上の図の例ではわずか 17px ですが、確かに全体の幅が狭くなっています。

要素を左詰めにしていれば特に問題は起こらないのですが、主となる要素を中央寄せすることが最近の流行りです。全体の幅が変わると中心線の位置が変わってしまう。その結果要素が動き、ガタつきが起こります。

ガタつきを防ぐ CSS

では、どうやってガタつきを防ぐかというと「最初からスクロールバーを表示させておけばよい」ということになります。

最初にも書いた通り、スクロールをしない設定の web ページでは意味がありません。ただ通常の web ページは縦に長くなり、よほど短いページでなければ縦スクロールバーが必要です。

CSS

body {
    overflow-y: scroll;
}

CSSだけなので簡単です。overflow-y は要素の縦の高さが包括する要素、ここではウィンドウの高さを超えたときどうするかを決めるプロパティ。値を scroll にすることで強制的にスクロールバーを出します。

まとめ

ガタつきが発生すると要素の位置を決めるための各座標の再計算が行われるためスクロールバーが出現した瞬間に時間的なロスが生まれます。ガタつくことで見た目的にもカッコ悪く実際の時間以上に遅く、重くなっているように感じます。ガタつかないに越したことはないです。

このブログはだいぶ前からこの CSS を設定していますが特に表示等の問題は起こっていません。また、モバイルでは通常スクロールバーがないので関係ありません。