- コーディング
【JavaScript】数値を文字列に変換する | 文字列を数値に変換する
- #JavaScript
- コーディング
【JavaScript】スマホ表示でスクロールを無効化する方法
- #JavaScript
こんにちは！まついちです。
花粉症が落ち着き、ようやく暖かい季節になってきましたね。
過ごしやすい気候になれば、公園のベンチで本を読みながらのんびりしたいなと思っている今日この頃です。
今回はレスポンシブでコーディングでよく使うハンバーガーメニューを実装した際に、
困った事例と解決した方法をご紹介いたします。
ハンバーメニューをクリックすると、メニューが展開される表示はよく見ると思います。
その際に、サイト全体のスクロールは停止させ、展開したメニュー内のスクロールのみ実行できるように調整してきました。
これまではCSSだけで対応出来ていたのですが、いつの間にかそれが機能しなくなっていました。
どうやら、ルートのスクロールイベントの有効化設定がデフォルトでonになっている事が原因のようです。
いつから、その設定になったかは不明ですが。
下記の記事が参考になりました。
実はSafariの「実験的な機能」の中に、Wheel Event listeners on the root made passiveがあり、オンになっていることでこのような挙動になっていたようでした。これはSafari15.3ではデフォルトでオンのようです。
結論としては、以下の記述で解決出来ました。
<button type="button" onclick="headerMenuFunc()"></button>これまではこのCSSの記述だけで良かったのですが、現在はこれだけでは機能しません。
html {
overflow: hidden;
}というわけで、下記のJavaScriptの記述で解決出来ました。
function headerMenuFunc() {
document.addEventListener('touchmove', handleTouchMove, { passive: false });
}
function handleTouchMove(e) {
e.preventDefault();
}簡単ではありますが、参考になれば幸いです。
引き続き、ネタが出来たら、更新していきます。
では！
