地味にはまってしまった。
スマホサイトのメニューって大体ハンバーガーメニューだよね。最近は。
(ハンバーガーメニューというやつ)
これをタップすると、ズルーっとグローバルメニューがかぶさるようにおりてくる、というのが一般的。
さて、そのメニュー内をスワイプしていると、後ろ側の ページが動いてしまうという現象に悩まされた。
タップでスクロールを禁止させるというのも見つけたが、
メニュー内はスクロールできるようにしたいため、背景だけスクロールを不可にしたい。
んで、しらべてみたら、htmlとbodyに対して、height:100%とoverflow:hiddenを割り当てればよいということがわかった。
実際に書くとこんな感じ。
閉じるときは解除も忘れずに。
手持ちのiphone6ではうまくいっている様子。
-------------追記-------------------
htmlも見たいというコメントをいただいたのでサンプルのhtmlのせますね。
今回のサンプルだとこんな感じ。
開くボタンと閉じるボタンがわかれてるパターン。
(開くも閉じるも1つのボタンっていうパターンも多いのでそれはまた別の記事で)
スマホサイトのメニューって大体ハンバーガーメニューだよね。最近は。
(ハンバーガーメニューというやつ)
これをタップすると、ズルーっとグローバルメニューがかぶさるようにおりてくる、というのが一般的。
さて、そのメニュー内をスワイプしていると、後ろ側の ページが動いてしまうという現象に悩まされた。
タップでスクロールを禁止させるというのも見つけたが、
メニュー内はスクロールできるようにしたいため、背景だけスクロールを不可にしたい。
んで、しらべてみたら、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つのボタンっていうパターンも多いのでそれはまた別の記事で)