スマートフォンのサイトを作っているときに必ずと言っていいほど実装する メニューアイコンをクリックして上下左右どこからか出てくるスマホのメニュー。

画面全体を覆うこともあったり、少し透過した黒い背景を覆い被せて メニューが上にかぶさっているということを視覚的に見せる方法を取ると思います。

その際に大体の人は今回の対策を知らずに実装しています。

普通に実装してしまうとスマホメニューを開いているときに 画面スクロールが普通に効いてしまうのでちょっとブサイクなサイトになります。

本来であればメニュー以外は開いたときの状態のまま固定してほしいですよね。

今回紹介するCSSを使えば画面のスクロールを止めることが出来ます。

overflow:hiddenをbodyタグに使う方法

bodyに対してoverflow:hiddenを使用すると、 画面の一番上からウィンドウの高さまでのサイズに固定されることになります。

数値的に言うとサイトの最上部から100vhの高さ以外は見えないようにするといった感じですね。

なので画面をスクロールした後にスクリプトでbodyにoverflow:hiddenをつけると その場からスクロールができないようになり現状の画面に固定される状態です。

こうするとどうあがいてもスクロールができなくなるので、 スマホメニューが開いているときにスクロールを向こうにすることが出来ます。

簡単ですが結構デメリットもあって私はこの方法を使うことは、 メニューが入れ子で開閉機能が無く1画面に収まる量であれば採用することが出来ます。

うまくやれば内部スクロールを実装してしまえば大丈夫ですが、結構手間になります。

overflow:hiddenを使う際の注意

overflowって意外となにげに使ってたりすることも多いプロパティなんですが、 思った以上に癖があるプロパティなんです。

ちょっとこれをbodyとかに設定しておくとposition:stickyが正常に動かなかったり 安易に使うと見えないところで邪魔されているということも結構あるので使用には要注意のプロパティです。

しかし今回紹介する方法はoverflow:hiddenを使った手法なので、 position:Stickyを使う場合は気をつけてください。

スマートフォンではあまりStickyを使わないと思うので 作るものと相談して使用するか決めてください。

position:fixedを全体のラッパー用タグに使う方法

body直下に1つdivを作ってそれをラッパーとして中身を作っていくという手法を取っている人は このposition:fixedの手法が使えます。

こうすることでラッパーの最上部に画面が移動して固定されるのですが、 内部的には普通にスクロールされています。

もちろん視覚的には上部固定です。

毎回最上部にスクロールされてしまう対処法

このままでは見た目的によろしくないのと、 解除したときにスクロール後の画面になってしまうので、ユーザーが混乱しかねません。

この手法を使うときはJavaScriptの併用が必須になります。

やり方としてはメニューを開くボタンを押したら発動するスクリプトを組んでおき、 その際に現在のスクロール位置を保存しておく。

そしてメニューが閉じられたときに保存していたスクロール位置に スクロールをジャンプさせると内部的にはスクロールが発生しているが 視覚的にはスクロールされていない状態に見えるので擬似的に画面固定が行なえます。

スクロールができるということは、開閉式のメニューや1画面を越えるようなメニューでも 問題なく簡単実装できるので楽っちゃ楽ですが、スクリプトの併用が必須になるので ちょっと難易度が高いかもしれません。

私は基本的にこの方法を使うのですが、少し問題が発生してきます。

スクロールイベントがあるサイトには不向きかも

スマホメニュー固定可の手法はスムーススクロールとかサイトにスクロールイベントを仕込んだりしている場合、 スクロール位置を戻したときに微妙に位置がずれてたりするので、調整がかなり難しいです。

調べてもデファクトスタンダード的なやり方って存在してない気がするんですよね。

おそらく検索すると私の方法がちらほらと出てくるかと思います。

大手企業のサイトなんかを見ていると今回の手法を駆使して作ってたり、 完全にJavaScriptで制御しているところもあったりするので、 これを使っておけば大丈夫みたいな手法が無い気がしますね。

おそらくググれば1発で実装できちゃう専用のライブラリとかもでてきそうですが、 何でもかんでもライブラリを使うというのは成長しないので 急いでないときは自力で構築したほうが身になります。

一度作っておけば、違うサイトを作ったときに処理を使い回せるますし サイトごとに細かい調整ができるようになるので自分で作ることをおすすめします。

おそらく一番いい方法としては現代の端末のスペックを考慮すれば 全JavaScript制御がベストだと思います。

過去にJavaScriptを切ってサイトを見に来る人がいた時代があったときに、 サイト作りを覚えてしまったので古い考え方が固着していて何かとCSSメインで作ろうとしてしまいます。

今はそんな人はお金にならないですし切り捨てて大丈夫なので、 JavaScriptオンリーで組んだほうがいい気がしますがなかなか抜けきらないものです。