jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2015.2. 3

fixedを使ったモーダルウインドウ展開時に、スクロールが重複するのを防ぐ

Category:
Tips

2015/02/05 修正: bodyにposition:fixed;を使わずとも単純に実現できるという指摘を受け、サンプルコードを修正しました。


前回「fixed要素を内部スクロール有りの全画面で表示する」という記事を書きました。

内部スクロールを備えたモーダルウインドウを気軽に実装できるコードでしたが、展開時にモーダルと本文とでスクロールが被ってしまい、且つ本文がスクロールしてしまった場合にモーダルを閉じると、開く直前にいた場所からズレてしまって使いにくくなる、という弱点が残っていました。

今回はその弱点を克服するための方法について解説をします。

弱点を克服したサンプルコード

今回はいきなりサンプルから掲載します。
以下のコードでは内外のスクロールが重複することなく、モーダルの開閉前後とでスクロール位置が維持されるようになっています。

See the Pen Modal window with an inner scroll - Maintain scrollTop by ykob (@ykob) on CodePen.

このコードと以前とでは何が違うのでしょうか。
要点は1点、body要素のoverflowプロパティの調整です。
チェックボックスのクリックイベント内で行っています。

checkbox[0].addEventListener('click', function(){
  if (this.checked) {
    body.style.overflow = 'hidden';
  } else {
    body.style.overflow = 'visible';
  }
});

モーダル展開時にはbodyのoverflowをhiddenに、逆にモーダルを閉じる際にはvisibleに戻すようにします。
この処理をモーダル開閉に加えて上げれば、スクロールの重複は避けられ、ユーザビリティの向上が図れます。

一手間増えてしまいますが、慣れれば大した処理でもないので、サイトの使いやすさをなるべく高く維持するためにも覚えておいてよいかと思います。

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.