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

2016/12/16 タグ:
  • このエントリーをはてなブックマークに追加

スマホでハンバーガーメニューを実装していたのですが、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;を入れておくと慣性スクロールが効くのでスムーズに。

SPONSOR
記事を書いている中の人
イリテク株式会社/入江 慎吾
WEBサービスやアプリのデザイン・開発をやっているクリエイターです。クラウド見積請求:CLOUD PAPER、リモートワーク求人:Rework、買い物メモアプリ:Rememo。情熱のこもったプロダクトをどんどんつくりたいです。(もっと詳しいプロフィール
関連する記事
メールマガジンで新着記事をフォロー

 

イリテクの最新情報をチェック!
  • follow us in feedly
    RSSで最新記事を読む
イリテクで開発したプロダクト
SPONSOR
こちらの記事もおすすめです