javascriptでスマホのスクロールをキャンセルする方法（と、再開する方法

javascriptで、スマホのスクロールを制御する方法をご紹介します。

ハンバーガーメニューを開いたとき、画面のスクロールを停止する例を実装します。

ぼちぼち役立つ時があると思うので、頭の片隅に置いてみてください。

スマホのスクロールをキャンセルする方法

まずはデモをご覧ください。（スマートフォンで開いてください。PCだとイベントが発生しないので）

removeEventListenerデモ

右上から展開するナビを開いている間はスクロールができません。

overflow:hiddenは間違い。

たとえば、ハンバーガーメニューを開いたときに、body要素にclassをつけたりして「overflow: hidden;」すればいいんじゃね？と思いがちですが、これは誤りで、

iOSのsafariやAndroidのChromeだと普通にスクロールできてしまうので、大抵のケースで、開いたナビの下に隠れているコンテンツがスクロールされてしまうことになります。

解決法1 : position: fixed;

bodyタグにposition: fixedを指定することでもスクロールを阻止することができます。（厳密には「キャンセル」ではないのですが

この場合は高さや幅の指定が要るんじゃないかな、と思います。

 body.fixed{  width: 100%;  height: 100%;  margin: auto;  position: fixed;  top: 0;  right: 0;  bottom: 0;  left: 0;  overflow: hidden;  }

body.fixed{

width: 100%;

height: 100%;

margin: auto;

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

overflow: hidden;

}

解決法2: touchmoveをキャンセルする

ケースによりますが、今回の正解はこちらです。

スマホでスクロールするときに発生する「touchmove」イベントをキャンセルします。

デモで使っている手法ですが、ざっくりと簡略化して書くとこのようになります。

 var scrollOff = function( e ){  	e.preventDefault();  }  // スクロールをキャンセル  document.addEventListener( ‘touchmove’,scrollOff, false);  //removeEventListenerで「スクロールをキャンセル」をキャンセル  document.removeEventListener( ‘touchmove’, scrollOff, false );