前提
iOSでハンバーガーメニューで表示したリストがうまくスクロールしなかったので、
「body-scroll-lock」というライブラリを利用したこちら↓を参考にして、
https://zenn.dev/kalubi/articles/75b735fd986584
bodyのスクロールを停止する事は出来ました。
実現したいこと
iOSでも、
ハンバーガーメニューを閉じた後も、
ハンバーガーメニューを開く直前にbodyで表示していた箇所を表示したままになるようにしたいです。
発生している問題・エラーメッセージ
iOSだと、 ハンバーガーメニューを閉じるとページトップに戻ってしまいます。
該当のソースコード
おそらくここだと思います…
js
const NAV = document.getElementById("nav");const MENU = document.getElementById("menu");const TOGGLE = document.getElementById("toggle"); // スクロールをロックする処理const disableBodyScroll = bodyScrollLock.disableBodyScroll;// ロックを解除する処理const enableBodyScroll = bodyScrollLock.enableBodyScroll;// body-scroll-lock オプションconst options = { reserveScrollBarGap: true // bodyにスクロールバー分のpadding-rightを追加するかどうか（デフォルト値：false）}; function menuOpen() { disableBodyScroll(NAV, options); //スクロールをロック NAV.setAttribute("aria-hidden", "false"); TOGGLE.setAttribute("aria-expanded", "true"); TOGGLE.setAttribute("aria-label", "メニューを閉じる");} function menuClose() { enableBodyScroll(NAV, options); //スクロールロックを解除 NAV.setAttribute("aria-hidden", "true"); TOGGLE.setAttribute("aria-expanded", "false"); TOGGLE.setAttribute("aria-label", "メニューを開く");} // タッチデバイスでは touchstart をトリガーにするconst clickTouchEvent = "ontouchstart" in window ? "touchstart" : "click";console.log(window); // リスナー登録TOGGLE.addEventListener(clickTouchEvent, () => { if (TOGGLE.getAttribute("aria-expanded") === "true") { menuClose(); } else { menuOpen(); }});
試したこと
jsに書き加えるなどするのだと思いますが、
jsに詳しくないので試せていません…<(_ _)>
補足情報（FW/ツールのバージョンなど）
今後のjsの勉強のために、
できれば//で解説を入れて頂けると助かります。
ご教授をよろしくお願いいたします。
※「body-scroll-lock」GitHub
https://github.com/willmcpo/body-scroll-lock
0 コメント