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

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

ただいまの
回答率

88.57%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,567

kameo

score 12

スマホのドロワーメニュー・ハンバーガーメニュー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時に背景を固定するにはどのようにすればいいでしょうか?
よろしくお願いいたします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • akihiro3

    2018/11/12 23:18

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

    キャンセル

  • kameo

    2018/11/13 02:58

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

    キャンセル

  • akihiro3

    2018/11/13 11:43

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

    キャンセル

回答 2

checkベストアンサー

0

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

body {
    overflow: hidden;
}


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

追記

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

body {
    overflow: hidden;
}


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

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>sample</title>
    <style>
      body {
        overflow: hidden;
      }

      .container {
          position: relative;
          width: 100%;
      }

      .gnav {
          clear: both;
          top:0px;
          position: absolute;
          width: 100%;
          z-index: 2;
      }

      #menu-list {display: none;}
    </style>
  </head>
  <body>
    <p class="menu-btn gmenu">MENU</p>

    <div class="container">

    <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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $(".menu-btn").click(function(){
            $("#menu-list").slideToggle(300);
        });
    });
    </script>
  </body>
</html>


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

追記2

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/20 22:12

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

    キャンセル

  • 2018/11/20 23:28

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

    よろしくお願いいたします。

    キャンセル

  • 2018/11/21 00:25

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

    キャンセル

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/20 23:25

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

    キャンセル

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

  • ただいまの回答率 88.57%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る