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

2016.11.1 JS / jQuery

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

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

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

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

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

removeEventListenerデモ

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

overflow:hiddenは間違い。

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

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

解決法1 : position: fixed;

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

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

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

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

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

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

 

 

touchmoveが発生したときに、e.preventDefaultで動作を初期化します。

ここでポイントなのは、スクロールをキャンセルする動作は関数化することと、addEventListenerで呼び出すときは引数で「e」を渡さないことです。

スクロールをキャンセルする動作は関数化する

removeEventListenerでイベントに対する操作を無効化するためには、そとからでも参照できるように処理を関数化しなくてはいけません。

https://developer.mozilla.org/ja/docs/Web/API/EventTarget/removeEventListener

jQueryで言うところの「.off」です。

addEventListenerで呼び出すときは引数で「e」を渡さない

関数化したpreventDefaultは「e 」を受け取っていますが、関数の引数でeを渡してしまうと、別のオブジェクトが渡ってしまうようです。これは気付かず少しハマってしまいました…

addEventListenerに対してremoveEventListener

リッチな表現にも使うことの出来る技術なので覚えて損はないですよ。

removeEventListenerデモ

 

でわ!

Profile

東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。(ポートフォリオ)Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。コーヒー友達募集中。