ハンバーガーメニューのメニュー部分までしかスクロールできないようにする方法

前提・実現したいこと

ハンバーガーメニューのメニューが表示されているとき、
メニュー部分までしかスクロールできないようにしたい。

現状は、メニューよりしたのコンテンツ部分までスクロールできてしまっています。

発生している問題

こちらの画像のような動きになります。

該当のソースコード

HTML
1  <!-- ???? -->
2  <input type="checkbox" id="menu">
3  <label for="menu" class="open" id="open">
4    <div></div>
5    <div></div>
6    <div></div>
7  </label>
8  <!-- ???? -->
9  <div class="nav-sp">
10    <ul>
11      <li><a href="">ホーム</a></li>
12      <li><a href="">ページ</a></li>
13      <li><a href="">タイポグラフィー</a></li>
14      <li><a href="">お問い合わせ</a></li>
15      <li><i class="fas fa-search"></i></li>
16    </ul>
17  </div>
18  <div class="container">

CSS
1  .nav-sp{
2    display: none;
3  }
4  .open, .close{
5    position: absolute;
6    top:0;
7    right:0;
8  }
9
10  .open{
11    display: none;
12    height:30px;
13    width:30px;
14    position:fixed;
15    margin-top:13px;
16    margin-right: 3px;
17    z-index:3;
18    @media screen and(max-width:782px){
19      display: block;
20    }
21    div{
22      width:74%;
23      background-color: #000;
24      height:1.5px;
25      position:absolute;
26      top:50%;
27      left:50%;
28      transform:translate(-50%, -50%);
29      transition: .3s;
30      &:first-child{
31        transform: translate(-50%, -9.5px);
32      }
33      &:last-child{
34        transform: translate(-50%, 9.5px);
35      }
36    }
37  }
38
39  .open.active div:first-child{
40    transform:rotate(45deg) translate(-50%, 0);
41    transform-origin:0% 50%;
42  }
43  .open.active div:nth-last-of-type(2){
44    opacity:0;
45  }
46  .open.active div:last-child{
47    transform:rotate(-45deg) translate(-50%, 0);
48    transform-origin:0% 50%;
49  }
50
51  input[type="checkbox"]{
52    position: absolute;
53    left: -50%;
54  }
55
56  input[type="checkbox"]:checked ~ .nav-sp {
57    font-size: 23px;
58    background-color: rgba(255, 255, 255, 0.747);
59    width: 100%;
60    height: 100vh;
61    position: absolute;
62    top: 0;
63    left: 0;
64    display: flex;
65    justify-content: center;
66    align-items:center;
67    z-index:1;
68    a{
69      z-index:1;
70    }
71    ul{
72      li{
73        padding-bottom: 20px;
74      }
75    }
76  }

試したこと

表示されるメニューに対して、height:100%を指定すると実現できるかと思いましたができませんでした。
また、overflow:hiddenも試してみましたが、実現できませんでした。

ご回答いただけますと幸いです。
よろしくお願いいたします。

行動規範の内容に同意します

回答2件

自己解決

jQueryでcheckboxにチェックが入っているとき、
bodyに対してoverflow:hioddenを設定することで解決いたしました！

投稿2020/07/20 01:47

chikasei427

総合スコア7

ちょっと何をしたいのか分かりませんが、
下記のようなことでしょうか。

css
1input[type="checkbox"]:checked ~ .nav-sp {
2  font-size: 23px;
3  background-color: rgba(255, 255, 255, 0.747);
4  width: 100%;
5  height: 100vh;
6  position: fixed;
7  top: 0;
8  left: 0;
9  display: flex; /* absoluteから修正 */
10  justify-content: center;
11  align-items:center;
12  z-index:1;
13
14以下略