地味にはまってしまった。

スマホサイトのメニューって大体ハンバーガーメニューだよね。最近は。

38
(ハンバーガーメニューというやつ)

これをタップすると、ズルーっとグローバルメニューがかぶさるようにおりてくる、というのが一般的。

さて、そのメニュー内をスワイプしていると、後ろ側の ページが動いてしまうという現象に悩まされた。
タップでスクロールを禁止させるというのも見つけたが、
メニュー内はスクロールできるようにしたいため、背景だけスクロールを不可にしたい。


んで、しらべてみたら、htmlとbodyに対して、height:100%とoverflow:hiddenを割り当てればよいということがわかった。

実際に書くとこんな感じ。
閉じるときは解除も忘れずに。

$('#openMenu').click(function(){
$('header').fadeIn();
$('body,html').css({"overflow":"hidden","height":"100%"});
});
$('#closeMenu').click(function(){
$('body,html').css({"overflow":"visible","height":"auto"});
$('header').fadeOut();
});

手持ちのiphone6ではうまくいっている様子。

-------------追記-------------------

htmlも見たいというコメントをいただいたのでサンプルのhtmlのせますね。

<header>
<div class="headerInner">
<div class="headerLogo">
<h1><img src="img/logo.png" alt="ロゴ"></h1>
</div>
<a href="#" id="openMenu"><img src="img/icon_menu_sp.png" alt="menu"></a>
</div>
<nav class="gnav">
<ul>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
<a href="#" id="closeMenu"><img src="img/icon_menu_sp.png" alt="menu"></a>
</nav>
</header>

 今回のサンプルだとこんな感じ。

開くボタンと閉じるボタンがわかれてるパターン。
(開くも閉じるも1つのボタンっていうパターンも多いのでそれはまた別の記事で)