今日の午前中、ずっとハマっていた内容をメモ。
今回対処する事象
ページ内容の高さが、ブラウザのウインドウの描画領域におさまらなくなった時 ページがスクロールバーの幅の分だけ横にズレる。
作ったもの
今回は下記のような画面を作った。
「説明文のタイトルがリストで並んでいて、リストをクリックすると詳細な説明文が表示される」 よくあるアコーディオンっぽい画面ですね。 ※上記のサンプルでは、青空文庫から適当に持ってきた文章を使っています
対処前の状態
サンプルの画面で説明文を表示していくと、ブラウザにスクロールバーが表示されたタイミングで 画面がカクッと左にズレる。これがどうしても気になったので、対応策を調べてみました。
行った対処
今回はCSSの修正だけで対応を行うことにしました。
html { overflow-y: scroll; }
「スクロールバーの表示有無で画面がズレるなら、 最初からスクロールバーの領域を表示しておけばいいじゃないか」という話です。
動きが気になる方は、上のJSFiddleで動きを試してみてください。
所感
jQueryのバグを真っ先に疑ってしまったせいで、午前の3時間をこいつの調査に使ってしまったのはここだけの話。泣けます。