• コーディング

【JavaScript】スマホ表示でスクロールを無効化する方法

  • #JavaScript
【JavaScript】スマホ表示でスクロールを無効化する方法

こんにちは！まついちです。

花粉症が落ち着き、ようやく暖かい季節になってきましたね。

過ごしやすい気候になれば、公園のベンチで本を読みながらのんびりしたいなと思っている今日この頃です。

今回はレスポンシブでコーディングでよく使うハンバーガーメニューを実装した際に、
困った事例と解決した方法をご紹介いたします。

ハンバーメニューをクリックすると、メニューが展開される表示はよく見ると思います。

その際に、サイト全体のスクロールは停止させ、展開したメニュー内のスクロールのみ実行できるように調整してきました。

これまではCSSだけで対応出来ていたのですが、いつの間にかそれが機能しなくなっていました。

どうやら、ルートのスクロールイベントの有効化設定がデフォルトでonになっている事が原因のようです。

いつから、その設定になったかは不明ですが。

下記の記事が参考になりました。

実はSafariの「実験的な機能」の中に、Wheel Event listeners on the root made passiveがあり、オンになっていることでこのような挙動になっていたようでした。これはSafari15.3ではデフォルトでオンのようです。

引用：touchやwheelのイベントリスナーにpassive: trueを明示的に指定する必要があるのか調べてみた

 

結論としては、以下の記述で解決出来ました。

<button type="button" onclick="headerMenuFunc()"></button>

これまではこのCSSの記述だけで良かったのですが、現在はこれだけでは機能しません。

html {
  overflow: hidden;
}

というわけで、下記のJavaScriptの記述で解決出来ました。

function headerMenuFunc() {
  document.addEventListener('touchmove', handleTouchMove, { passive: false });
}

function handleTouchMove(e) {
  e.preventDefault();
}

簡単ではありますが、参考になれば幸いです。

引き続き、ネタが出来たら、更新していきます。

では！

  • 松浦 一彦

  • 約11年間、事業者会社、制作会社でWEBデザイン、WEBディレクション、GA/GTMを使用したアクセス解析などを経験。
    2022年3月よりフリーランスとして独立。
    現在は業務委託として複数の企業のプロジェクトに参加する傍ら、受託案件を受けたり、自身のブログを運用しています。

    • スキルUI/UX改善、サイト分析、WEBサイト&LPデザイン、コーディング、ディレクション、動画編集、WordPress構築
    • 言語HTML、CSS、Javascript/jQuery、PHP
    • ツールPhotoshop、illustrator、Premiere、After Effect、XD、Figma、Googleアナリティクス

関連記事