スクロールバーの有無によって、ブラウザの画面が横にずれる話

今日の午前中、ずっとハマっていた内容をメモ。

今回対処する事象

ページ内容の高さが、ブラウザのウインドウの描画領域におさまらなくなった時 ページがスクロールバーの幅の分だけ横にズレる。

作ったもの

今回は下記のような画面を作った。

「説明文のタイトルがリストで並んでいて、リストをクリックすると詳細な説明文が表示される」 よくあるアコーディオンっぽい画面ですね。 ※上記のサンプルでは、青空文庫から適当に持ってきた文章を使っています

対処前の状態

サンプルの画面で説明文を表示していくと、ブラウザにスクロールバーが表示されたタイミングで 画面がｶｸｯと左にズレる。これがどうしても気になったので、対応策を調べてみました。

行った対処

今回はCSSの修正だけで対応を行うことにしました。

html {
    overflow-y: scroll;
}

「スクロールバーの表示有無で画面がズレるなら、 最初からスクロールバーの領域を表示しておけばいいじゃないか」という話です。

動きが気になる方は、上のJSFiddleで動きを試してみてください。

所感

jQueryのバグを真っ先に疑ってしまったせいで、午前の3時間をこいつの調査に使ってしまったのはここだけの話。泣けます。