fancyboxでモーダルウィンドウを表示中、要素の横幅が伸びてしまう理由

サンプル

  • 要素の幅が100%(= ブラウザの横幅目一杯まで伸ばしている)
  • ページが縦に長く、スクロールバーが表示されている

という前提の話。


要素のpositionに”fixed”もしくは”absolute”を設定しているとfancyboxでモーダルウィンドウを表示させたときに幅が横に伸びてしまう。

MEMO

ヘッダーやナビメニューをfixedで固定している場合、モーダルウィンドウの表示と非表示を切り替える度に左右に微妙に動いてしまうのでちょっと気持ち悪い。

理由は以下の通り。

fancyboxでモーダルウィンドウ表示時に要素が横に伸びる理由
  1. モーダルウィンドウ表示中は、スクロールバーが非表示になる
    このとき、スクロールバーの幅を確保するためにbody要素にmargin-rightが設定される(以下の画像参照)
  2. 通常であればmargin-rightのおかげでスクロールバーが非表示であっても要素が横に伸びることはない
  3. ただし、positionに”fixed”もしくは”absolute”が設定されている要素は親要素(= body要素)のmargin-rightを無視するので、結果としてスクロールバーが非表示になって生じたスペースの分だけ要素が横方向に伸びてしまう。
fancyboxのモーダルウィンドウを表示するとboryにmargin-rightが設定される

逆に言えば、そもそもスクロールバーがない(= ページの縦方向が短い)ときはfancyboxのモーダルウィンドウ表示中にmargin-rightが設定されることもないので、positionの値に関わらず要素が横に伸びることはない。

ソースコード

HTML
CSS
jQuery

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です