質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

GitHub

GitHubは、Gitバージョン管理システムを利用したソフトウェア開発向けの共有ウェブサービスです。GitHub商用プランおよびオープンソースプロジェクト向けの無料アカウントを提供しています。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

674閲覧

iOSでbodyのスクロールを停止できたが、ハンバーガーメニューを閉じるとページトップに戻ってしまう

MIIM

総合スコア1

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

GitHub

GitHubは、Gitバージョン管理システムを利用したソフトウェア開発向けの共有ウェブサービスです。GitHub商用プランおよびオープンソースプロジェクト向けの無料アカウントを提供しています。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2022/10/05 07:29

編集2022/10/13 19:01

前提

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問