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

2018/03/23更新 カテゴリー:開発奮闘記 タグ:
SPONSOR
  • このエントリーをはてなブックマークに追加

スマホでハンバーガーメニューを実装していたのですが、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

PRODUCT

イリテクで開発したプロダクト

PROFILE

プロフィール

入江 慎吾/イリテク代表
「死ぬ気でやれよ、死なないから」をモットーに体当たりでWEBサービスをつくってます🔥 収入もないのに受託開発をやめて好きなサービスだけをつくることに決めました。資金がつきるか、ヒットするのが先か...見守ってください。 (詳しいプロフィール)
WEBサービス・アプリ開発に役立つ情報をイリテクの入江がお届けします。プログラミング、UI/UXデザイン、SNS・ブログマーケティングなど、プロダクト開発だけで自由に生きていくための実践的な情報を配信しています。

RELATION

関連する記事

SPONSOR

TAG

タグから記事をさがす