jQueryjavascriptで、スマホのスクロールを制御する方法をご紹介します。ハンバーガーメニューを開いたとき、画面のスクロールを停止する例を実装します。役立つ時があると思うので、頭の片隅に置いてみてください。スマホのスクロールをキャンセルする方法まずはデモをご覧ください。(スマートフォンで開いてください。PCだとイベントが発生しないので)removeEventListenerデモ右上から展開するナビを開いている間はスクロールができません。overflow:hiddenは間違い。hidden;」すればいいんじゃね?と思いがちですが、これは誤りで、iOSのsafariやAndroidのChromeだと普通にスクロールできてしまうので、大抵のケースで、開いたナビの下に隠れているコンテンツがスクロールされてしまうことになります。fixedを指定することでもスクロールを阻止することができます。(厳密には「キャンセル」ではないのですがこの場合は高さや幅の指定が要るんじゃないかな、と思います。touchmoveをキャンセルするケースによりますが、今回の正解はこちらです。スマホでスクロールするときに発生する「touchmove」イベントをキャンセルします。デモで使っている手法ですが、ざっくりと簡略化して書くとこのようになります。);touchmoveが発生したときに、e.preventDefaultで動作を初期化します。ここでポイントなのは、スクロールをキャンセルする動作は関数化することと、addEventListenerで呼び出すときは引数で「e」を渡さないことです。スクロールをキャンセルする動作は関数化するremoveEventListenerでイベントに対する操作を無効化するためには、そとからでも参照できるように処理を関数化しなくてはいけません。https://developer.mozilla.org/ja/docs/Web/API/EventTarget/removeEventListenerjQueryで言うところの「.off」です。」を受け取っていますが、関数の引数でeを渡してしまうと、別のオブジェクトが渡ってしまうようです。これは気付かず少しハマってしまいました...addEventListenerに対してremoveEventListenerリッチな表現にも使うことの出来る技術なので覚えて損はないですよ。音楽Profile東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。