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

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

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

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

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

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

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

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

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

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

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

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

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

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

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