最上部固定スマホメニューでプルダウン部がデバイスの高さに収まり切れない場合のスクロール制御

現象

ブラウザの最上部位置に固定化されたスマホメニューにおいて、プルダウン部がデバイスの高さに収まり切らない場合、下へのスクロールがコンテンツ要素にしか作用せず、オーバーフローして見切れている部分にアクセスできないことがあります。

    
        


            （プルダウン部）

        

        


            （コンテンツ要素）

        

    

.sp-manu-wrap{
    position:   fixed;
    z-index:    999;
}

対策

高機能のスマホメニューであればプルダウン部が最下部まで見られるメカニズムが備わっていますが、そのメカニズムが備わっていない場合は、プルダウン部に作用する縦スクロール機能を導入すればよいと考えられます。

方法

原理としては、プルダウン部分をデバイス高さ（＝ブラウザ高さ）100%とし、プルダウン部ではみ出る場合はスクロールバーを出現させる（スマホではスワイプ）、ということです。

スマホメニュー部分 .sp-menu-wrap が body 直下に存在するものとして、以下のコードをcssに記述してください。

html,
body,
.sp-manu-wrap{
	height:	    100%;
}
.sp-manu-wrap{
	overflow:	auto;
}

プルダウンの高さをデバイス（＝ブラウザ）の高さに追従させるために、プルダウンに至る上位要素を height:100% で作用させるところが最重要ポイントです。

注意

コンテンツ部分に <a> があると、リンクが効かなくなることがあります。
これはスマホメニュー部分 .sp-menu-wrap が height:100%; なので、目に見えていない状態であっても position:fixed;z-index:999; のためにオーバーラップしているためです。

対策としては、スマホメニュー部分がプルダウンしている時だけ height:100%; とすればよいでしょう。

以下の制御は、 .sp-menu-wrap が通常は height:auto; で プルダウンしている時 height:100%; に切り替える jQuery コードです。本来はプルダウンしているかどうかの状態に追従させるべきですが、簡易的にハンバーガーメニューのクリックで toggleClass させています。

html,
body,
.height100{
	height:	    100%;
}
.sp-manu-wrap{
	overflow:	auto;
}

	$('.humberger_btn').on('click', function() {
		$('sp-manu-wrap').toggleClass('height100');
	});

もう一つの方法

プルダウンの高さをデバイス（＝ブラウザ）の高さに追従させるという原理からすると、ページ表示完了時とブラウザサイズ変更時にプルダウンの高さを強制的に指定してしまう、という方法も有効かもしれません。
ブラウザの高さに収まり切れないプルダウン部にはスクロールバーが出ます。

これもjQueryで制御します。scroll イベントで window.height() を .sp-menu-wrap の style=”height:325px”; のように反映させればよいと考えられます。
（※コードは省略）

2023.8.1 追記　もう一つのさらに便利な方法

プルダウンの高さをデバイス（＝ブラウザ）の高さに追従させるという原理に変わりはありません。
しかし、jQueryなどでダイナミックに制御するのではなくcssだけで制御できるので、非常に単純です。

プルダウンの高さを 100vh で指定し、オーバーフロー分はスクロールバー（スマホではスワイプ）で表示させるという方法です。

.sp-manu-wrap{
	height:	    100vh;
	overflow:	auto;
    padding-bottom: 50px;
}

上位要素との関連もなく、他の要素の動作を妨害することもないので、非常に簡単で安全な方法と言えます。

最終行の padding は、スクロールしきれない領域がある場合に追加してください。（この領域ができる原因の調査はしておりません）