兵庫県三田市でホームページ製作をしているゴリラドットです。

ハンバーガーメニュー（漢字の「三」みたいなの押したら出てくるメニューのコト）がスマホ表示時に、スクロールで下が一瞬縮むというか全画面じゃなくなって下の本文が見切れちゃう現象、よくよそ様のサイトを見てもありますよね。

これの原因ってスマホはスクロール時にアドレスバー（https~て書いてるトコロ）が勝手に引っ込むようになってて、その引っ込んだときにwidth:100%してるその100%の範囲が伸びちゃう（変わっちゃう）から起こるんですよね。けっこう治しづらいバグ、というか仕様だと思います。

ということで、ここではハンバーガーメニューがスマホスクロール時に下が一瞬縮んじゃう問題の解決方法を紹介しますね。

 

bodyにこれを設定！

ハイ、いきなり解決方法から。こんなもんダラダラ理屈聞いても退屈なだけですからね。

$('#navigation-onoff').on('change', function(){
	if( $(this).prop('checked') ){
		$('body').css('overflow', 'hidden');
	}else{
		$('body').css('overflow', '');
	}
});

「#navigation-onoff」っていうのはボタンのcheckboxの名前です。ここの変化を「change」のイベントリスナーで見ています。

んで「checked」つまり押されてたらハンバーガーメニューが出てきてるわけで、そういう時は「body」に「overflow:hidden」を設定。反対にオフされたらoverflowをなくす、ていうシンプルな処理です。

こんだけでスマホスクロール時にハンバーガーメニューの下が一瞬縮んで、下のコンテンツが見切れちゃう問題が解決します。

 

解決したけど…なんでよ？

そもそもbodyにoverflow:hiddenはけっこう危機感あるというか、アブナイ印象のある処理なんで、人によっては「うえっ」と思ってしまうかも。でもjavascriptで制御してますしその制御も紛れの起こらない超シンプル構造なんで大丈夫。たぶんコードみて、まあ、これなら大丈夫そうだな、と思ってもらった人も多いと思います。

んで。

なんでこれでスクロール時に見切れなくなるの？下が縮まなくなるの？て話です。興味ある人だけ読んでくださいね。

このスマホスクロール時にハンバーガーメニューが縮んで下が見切れちゃう問題。

これはハンバーガーメニューの下の主コンテンツがスクロールできちゃうから起こる問題、なんです。スクロールさえできなかったらそもそもアドレスバーが引っ込むこともないわけで。

だからハンバーガーメニューが表示されてる間はbody側のスクロールを強制的に止めちゃう。もうスクロールできないようにしちゃう。「overflow:hidden」で。

そうするとそもそもスクロールできないからアドレスバーが引っ込んでwidth:100%の100%が変わっちゃうこともなくなるってわけ。

ちなみにハンバーガーメニューがけっこう長くってハンバーガーメニュー内で下にスクロールしなくちゃいけなくても大丈夫。このやり方で解決できちゃいます。

アドレスバーが引っ込むのはあくまで主コンテンツ、body側のみなので安心してくださいね。

 

まとめ

スマホスクロール時にハンバーガーメニューの下が一瞬縮んじゃって、その下のコンテンツが見切れちゃう問題の解決方法を紹介しました。

まとめるとこれは主コンテンツ側（body側）がスクロール可能だから起こるバグ、というか仕様なのでメニュー表示時はbodyのスクロールを「overflow:hidden」で禁止にしてやれば解決できます。

javascriptで解決するのはあんまり好きじゃない人も多いと思いますが、構造がシンプルなのでバグは生みません。なんせif文1個だけですから。

参考にしてみてくださいね。