HOME > 開発メモ > スマホのハンバーガーメニューでpositionにfixedを入れてスクロールできなくなる問題を解決
2016/12/16 タグ:

スマホのハンバーガーメニューでpositionにfixedを入れてスクロールできなくなる問題を解決

  • このエントリーをはてなブックマークに追加

スマホでハンバーガーメニューを実装していたのですが、positionにfixedを入れていると位置が固定されてしまい、スクロールできなくなります。メニューの数が多くなるとスクロールできないため、メニューとして機能しなくなるという問題の解決法について。

SPONSOR

下のようになっているような場合に発生します。

<nav>
<ul>
<li>メニュー</li>
(中略)
</ul>
</nav>
nav {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

こういう場合、navの下のulにoverflowを入れれば解決します。

nav ul{
 height: 100%;
 overflow: auto;
 -webkit-overflow-scrolling: touch;
}

-webkit-overflow-scrolling: touch;を入れておくと慣性スクロールが効くのでスムーズに。

おすすめセレクション

この記事をシェアする
  • このエントリーをはてなブックマークに追加

SPONSER

こちらの記事もおすすめです

お役にたちましたら、メール購読もどうぞ!

 

イリテクの最新記事をお届けします

イリテクの最新情報をチェック!
  • follow us in feedly
    RSSで最新記事を読む
プロフィール
入江 慎吾
WEBサービス・アプリ開発デベロッパー。クラウド見積請求書作成サービス「CLOUD PAPER」を開発・運営。「開発までできるシステム顧問サービス」を実施中。(もっと詳しく
開発したWebサービス
開発したアプリ
新着記事
カテゴリ/タグ
SPONSER