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

fixed要素を内部スクロール有りの全画面で表示する

Category:
CSS
Tips

今回は直接のJavaScriptネタではありませんが、動的UI実装の際に使用することの多いTipsの覚書です。

PCサイトに限らずスマホサイトでも、モーダルウインドウを実装したいという要件は多々あると思います。実装する方法はさまざまと思いますが、個人的にはモーダル要素をfixedで、本文よりも上側に配置するやり方を好んで使います。

またスマホは特にモニタサイズが特定できないので、モーダル内に記載したい項目が長くなる場合はスクロールを発生させたいと思うことでしょう。そのようなケースでは、どのように実装すれば簡単に済むでしょうか。

fixed要素を全画面サイズにする

これはabsolute要素の中央配置と同様の方法で実装します。

.element {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

これでfixed要素は上下左右に広がり、全画面表示となります。

fixed要素に内部スクロールを実装する

fixed要素の内部スクロールは、先ほどの記述にoverflowを追記することで実装できます。

.element {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: scroll;
}

上記コードではoverflow-yを使用しているので、縦方向にのみ内部スクロールが発生します。

そのほかに細かなケアが必要な場合も

今回のやり方でcssを書いたサンプルが以下です。
チェックボックスを操作することで、モーダルの開閉を制御できます。

See the Pen modal window with inline scroll - only css by ykob (@ykob) on CodePen.

この場合、モーダル内部のスクロールは機能しているものの、モーダルが被さる元のコンテンツのスクロールも維持されているため、スクロールが二重になってしまっています。

こうなると、たとえばモーダルの下までしかスクロールしたくないのに、それにあわせて元のコンテンツもスクロールしてしまい、モーダルを閉じると、開く前とは別の場所にいた!というようなことなって、ユーザビリティを損ねます。

そのような不便利さを解消する方法も様々ありそうですが、それはまたネタが変わるので、別のTipsで。

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

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