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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

7126閲覧

ドロワーメニュー表示時にスクロールしても背景が動かないようにしたい。

kameo

総合スコア12

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/11/12 12:10

編集2018/11/20 13:41

#スマホのドロワーメニュー・ハンバーガーメニューOPEN時にスクロールしても、背景画面はスクロールせずに固定されている状態にしたい

##現在の状況
JQURYのslideToggleを利用し、ドロワーメニューを設置しておりますが、メニューを開いてスクロールすると背景ごとスクロールされている状態です。

##HTML

<p class="menu-btn gmenu">MENU</p> <div class="container"> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p><p>コンテンツ</p> <div class="gnav"> <div id="menu-list"> <ul> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> <li>メニュー内容</li> </ul> <p class="list-close menu-btn" title="close">閉じるボタン</p> </div> </div> </div>

##CSS

.container { position: relative; width: 100%; } .gnav { clear: both; top:0px; position: absolute; width: 100%; z-index: 2; background-color: #FFFFFF; } #menu-list {display: none;}

#JS

<script type="text/javascript"> $(function(){ $(".menu-btn").click(function(){ $("#menu-list").slideToggle(300); }); }); </script>

メニューOPEN時に背景を固定するにはどのようにすればいいでしょうか?
よろしくお願いいたします。

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

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

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

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

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

akihiro3

2018/11/12 14:18

今の要素量ではスクロールするほど内容が無いので再現できません。あと、これは普通にうっかりミスでしょうが`閉じるボタン`も一緒に消えてます。
kameo

2018/11/12 17:58

ありがとうございます。要素量は簡易的に記載しておりました。実際はもっと内容が多く、スクロールしなければ全体が見えません。またメニューボタンでも開閉できるようになっています。
akihiro3

2018/11/13 02:43

ごめんなさい。コピペの時に範囲選択ミスしてたようです
guest

回答2

0

android機種は、html,bodyにoverflow: hidden;, height: 100%;で背景固定をすることができます。
iphoneはこの方法では背景固定することは不可能です。

背景を固定させるドロップダウンはあまり見たことがないですね。
この2パターンが多いかと思います。

  1. ドロップダウンの時は背景を固定させない。
  2. ドロップダウン表示時のスクロール位置を取得しておく、背景がスクロールしてもドロップダウンを閉じた時は、はじめに取得した位置までスクロール位置を戻す。

投稿2018/11/20 12:28

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

kameo

2018/11/20 14:25

ありがとうございます。 2はどのようなコードにすれば実装可能でしょうか? よろしくお願いいたします。
guest

0

ベストアンサー

画面スクロールを無効にするのは
bodyoverflow: hiddenで実現可能です

css

1body { 2 overflow: hidden; 3}

ボタンclickbodyclass切替えするのはどうですか?
追記

特に何も触ることなく
下記追加で背景スクロールは固定出来てます

css

1body { 2 overflow: hidden; 3}

全コード貼っておきますね

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>sample</title> 6 <style> 7 body { 8 overflow: hidden; 9 } 10 11 .container { 12 position: relative; 13 width: 100%; 14 } 15 16 .gnav { 17 clear: both; 18 top:0px; 19 position: absolute; 20 width: 100%; 21 z-index: 2; 22 } 23 24 #menu-list {display: none;} 25 </style> 26 </head> 27 <body> 28 <p class="menu-btn gmenu">MENU</p> 29 30 <div class="container"> 31 32 <p>コンテンツ</p> 33 34 <div class="gnav"> 35 <div id="menu-list"> 36 <ul> 37 <li>メニュー内容</li> 38 <li>メニュー内容</li> 39 <li>メニュー内容</li> 40 <li>メニュー内容</li> 41 <li>メニュー内容</li> 42 <li>メニュー内容</li> 43 <li>メニュー内容</li> 44 <li>メニュー内容</li> 45 <li>メニュー内容</li> 46 <li>メニュー内容</li> 47 <li>メニュー内容</li> 48 <li>メニュー内容</li> 49 <li>メニュー内容</li> 50 <li>メニュー内容</li> 51 <li>メニュー内容</li> 52 <li>メニュー内容</li> 53 <li>メニュー内容</li> 54 <li>メニュー内容</li> 55 <li>メニュー内容</li> 56 <li>メニュー内容</li> 57 <li>メニュー内容</li> 58 </ul> 59 <p class="list-close menu-btn" title="close">閉じるボタン</p> 60 </div> 61 </div> 62 </div> 63 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 64 <script type="text/javascript"> 65 $(function(){ 66 $(".menu-btn").click(function(){ 67 $("#menu-list").slideToggle(300); 68 }); 69 }); 70 </script> 71 </body> 72</html>

やっぱり背景スクロールが固定できてないなら、
他に原因があるのかもですね

追記2

overflowでスクロールしてほしくないものには
「hidden」で
スクロールしてほしいものには
「scroll」です
どちらも子要素が親要素をはみ出した場合です

例えばウィンドウと同じで
スクロールバーが出ない場合は、はみ出してないのだと思います

投稿2018/11/12 14:26

編集2018/11/20 16:23
akihiro3

総合スコア955

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

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

kameo

2018/11/12 17:59

ご回答ありがとうございます。 試してみましたが、やはり、開いたメニューをスクロールすると、背景も同じようにメニュー下の部分まで移動してしまいます。
akihiro3

2018/11/13 02:48

こちらでの再現では背景スクロールしませんが何故でしょう? それか、質問の意図をこちらが勘違いしてるのかもですかね
kameo

2018/11/20 12:19

申し訳ございません。こちらの説明不足でした。 コード上でメニュー表示部をコンテンツ本文の下に記載しています。 本文コンテンツとメニューをcontainerクラスで囲んで、メニュー部をgnavクラスにし、MENUボタンの直下から開いて見えるようにしています。 overflow: hidden;が効かないのは、このposition指定のCSSの影響でしょうか? よろしくお願いいたします。
akihiro3

2018/11/20 13:12

詳しい説明ありがとうございます positionそのままでも効きました 追記でこちらの現状のコード全文貼っておきますので マルっと全部コピペして再現を確認してください
kameo

2018/11/20 14:28

ありがとうございます。 試してみましたが、ご教示頂いたコードですと、メニューを開いた際にメニューまでスクロールできない状態です。メニューはスクロールして「閉じる」を押した際に下のコンテンツがスクロールせずにはじめの位置で止まっているようにしたいのですが、今のままで実装は難しいでしょうか? よろしくお願いいたします。
akihiro3

2018/11/20 15:25

メニュ―はスクロールしてほしいのですね その場合はメニューの親要素に overflow:scrollです 詳しくは追記しておきました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問