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;を入れておくと慣性スクロールが効くのでスムーズに。

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

 

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

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

イリテクの最新情報をチェック!
  • follow us in feedly
    RSSで最新記事を読む

イリテクで開発したサービス

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

SPONSER

イリテクのプロフィール
入江 慎吾
デザインエンジニア。イリテク株式会社 代表取締役。Webシステム開発、Webサイト制作、スマートフォンアプリ開発を受託で行うほか、自社企画でクラウド見積請求書作成サービス「CLOUD PAPER」を開発・運営。仕様を決めずに少ない予算でも開発をスタートできる「月額固定のシステム開発」を実施中。(もっと詳しく
開発したWebサービス
開発したアプリ
新着記事
カテゴリ/タグ