position: fixedのコンテンツでスクロールさせる方法!

position: fixedのコンテンツでスクロールさせる方法について解説します。position: fixedを設定してしまうと、設定した要素内では何も設定しないとスクロールができません。ここではその設定方法について解説します。

コンテンツ [表示]

  1. 1position: fixedのコンテンツでスクロールさせたい
  2. 2position: fixedのコンテンツでスクロールさせる方法
  3. 3まとめ

position: fixedのコンテンツでスクロールさせたい

今回はスマホ画面でよく用いられるハンバーガーメニューを用いてposition: fixedのコンテンツでスクロールさせる方法について紹介します。

position: fixedを用いるとドロワーメニュー内で複数のリストがあり、要素からはみ出る場合もスクロールできないです。

ではサンプルコードを用意したので、挙動を確認してみましょう。

このようにメニューが多く存在する場合、position: fixedを設定して固定しているがために、スクロールできず、全て表示できません。

この問題はCSSを用いて解決できます。

では以下の項目で対処法について見ていきましょう。

position: fixedのコンテンツでスクロールさせる方法

position: fixedのコンテンツでスクロールさせることはCSSでとても簡単に実現できます。
方法としてはCSSのoverflowプロパティを設定するのみです。

ではサンプルコードで実際の挙動を確認してみましょう。

あわせて読みたい
overflow
CSSのoverflowプロパティは要素の内容がボックスの範囲から溢れる場合に、その見せ方を制御するプロパティです。overflowプロパティの構文や使い方をサンプルコード付きで解説します。

このようにul要素に対して、overflow: auto;を設定するだけで、固定されずposition: fixedのコンテンツでスクロールさせることができます。

また-webkit-overflow-scrolling: touch;を設定することで、スムーズにスクロールできるように設定しています。

私のChrome環境ではheight100%に設定してしまうと、最後までスクロールできなかったので、heightは適宜調整しましょう。

まとめ

いかがでしたでしょうか?

ここで紹介したようにハンバーガーメニュー内のみならず、overflowプロパティを用いるだけで、position: fixedのコンテンツでスクロールさせることができます。

ぜひ試してみてください。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

西村卓也
ライター

西村卓也

HTML/CSS/JSに関する記事を執筆しています。よろしくお願いします。