スマホのときだけ縦・横スクロール(overflow)が効かない!ときはhtmlとbodyのz-indexを確認してみる

いやー、ハマったハマった。

PCでデバッグツールでスマホ表示に変えたときは正常にスクロールできるのに、実機になると動かない現象が発生。

ハンバーガーメニューでメニューリストが長いときに固まってスクロールできない状態になった。
あれ?いつもはスクロールするのに。。

「<meta name=”viewport” content=”width=device-width, initial-scale=1″>」も入れてるし、

「overflow-y: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;」も入れてるし。

なぜーーーー

と、原因を探していると、

htmlとbodyに「z-index:-100;」と入れていた。
(いつ入れたか覚えてない、、)

ハンバーガーで開いたメニューの箱にz-indexの値を高くしても、ハンバーガーのfixedの基準がhtmlタグだからスクロールしても下に隠れて無いことにされているようだ。

htmlとbodyのz-indexを「z-index: auto;」に変更。

はい、解決〜