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