作成中のwebページについてスクロールできない。

実現したいこと

作成中webページについて、スクロールできるようにしたい。

前提

html、Javascript、Scssでwebページを作成しています。

発生している問題・エラーメッセージ

タイトルの通り

### 該当のソースコード
```html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta name="robots" content="noindex,nofollow" />
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no" />
  <!-- meta情報 -->
  <title>ExciteCode</title>
 
  <!-- css 、JavaScript 読込リンク省略-->

</head>

<body>
  <header class="header">
    <header class="header js-header">
      <div class="header__inner">
        <h1 class="header__name"><img class="header__logo" src="/images/icon.svg" alt="header logo"></h1>
        <nav class="header__nav md-none">
          <ul class="header__items">
            <li class="header__item">
              <a href="#about" class="header__link">About</a>
            </li>
            <li class="header__item">
              <a href="#service" class="header__link">Service</a>
            </li>
            <li class="header__item">
              <a href="#news" class="header__link">News</a>
            </li>
            <li class="header__item">
              <a href="#FAQ" class="header__link">FAQ</a>
            </li>
            <li class="header__item">
              <a href="#contact" class="header__link header__link--contact">Contact</a>
            </li>
          </ul>
        </nav>


      </div>
      <div class="hamburger js-hamburger md-show">
        <span></span>
        <span></span>
        <span></span>
      </div>

      <div class="drawer-menu js-drawer">
        <div class="drawer-menu__inner">
          <div class="drawer-menu__items">
            <li class="drawer-menu__item">
              <a href="#about" class="drawer-menu__link">About</a>
            </li>
            <li class="drawer-menu__item">
              <a href="#service" class="drawer-menu__link">Service</a>
            </li>
            <li class="drawer-menu__item">
              <a href="#news" class="drawer-menu__link">News</a>
            </li>


            <li class="drawer-menu__item">
            <a href="#FAQ" class="drawer-menu__link">FAQ</a>
            </li>

            </li>
            <li class="drawer-menu__item">
            <a href="#contact" class="drawer-menu__link drawer-menu__link--contact">Contact</a>
            </li>

          </div>
        </div>
      </div>
      </div>

  </header>

  <main>
<!-- main view -->
<div class="mv">

  <div class="mv__inner">
    <div class="mv__slider swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <picture>
            <source srcset="/images/fv-bgi1.jpg" media="(min-width:1024px)">
            <img src="images/fv-sp-bgi1.jpg" alt="">
          </picture>
        </div>
        <div class="swiper-slide">
          <picture>
            <source srcset="/images/fv-bgi2.jpg" media="(min-width:1024px)">
            <img src="images/fv-sp-bgi2.jpg" alt="">
          </picture>
        </div>
        <div class="swiper-slide">
          <picture>
            <source srcset="/images/fv-bgi3.jpg" media="(min-width:1024px)">
            <img src="images/fv-sp-bgi3.jpg" alt="">
          </picture>
        </div>
      </div>
      <div class="mv__title-wrap">
        <img class="mv__logo" src="images/logo.svg" alt="main view logo">
        <p class="mv__title">
          <span class="mv__title-large">挑</span>戦する。<br class="md-show">
          <span class="mv__title-strong">自</span>分を超える。
        </p>

      </div>
    </div>
  </div>

</div>

<!-- about -->
<section id="about" class="about">
  <div class="about__inner inner">
    <div class="about__body">
      <div class="about__title section-title">
        <h2 class="section-title__main">About</h2>
        <p class="section-title__sub">わ...て</p>
      </div>
      <p class="about__sub-title text--large">変化を恐れないで<br>挑戦し..添う。</p>
      <p class="about__text text">わたしたちは、...ます。</p>
    </div>
    <img src="images/about.jpg" alt="" class="about__img md-none">
  </div>

</section>


</main>

  <footer class="footer">
   </footer>

</body>
</html>

Scss
1
2//header
3
4.header{
5    position: fixed;
6    z-index: 1000;
7    top: 0;
8    left: 0;
9    height: 75px;
10    border-color: transparent;
11    width: 100%
12}
13
14.header__inner{
15    display: flex;
16    align-items: center;
17    height: inherit;
18    padding-left: 22px;
19}
20
21.header__name{
22    margin-right: auto;
23}
24
25.header__logo{
26    @include mq("lg"){
27    width: 132px;
28    }
29
30}
31
32.header__nav{
33    height: inherit;
34}
35.header__items{
36    display: flex;
37    align-items: center;
38    height: inherit;
39}
40
41.header__item{
42    height: inherit;
43
44
45}
46.header__item:not(:first-child){
47    padding-left: 70px;
48}
49
50.header__link{
51    font-size: 16px;
52    font-weight: $medium;
53    display: flex;
54    align-items: center;
55    justify-content: center;
56    height: inherit;
57    color:$black;
58}
59
60.header__link--contact{
61    padding: 0 24px;
62    color: $white;
63    background-color: $red2;
64    transition: background-color 0.3s;
65    &:hover{
66        opacity: 1;
67        background-color: $red;
68    }
69}
70
71
72//hamburger
73
74.hamburger{
75    position:fixed;
76    z-index: 9999;
77    top: 30px;
78    right: 15px;
79    width: 25px;
80    height: 25px;
81    cursor:pointer;
82}
83
84.hamburger.is-active{
85    top: 32px;
86    right: 20px;
87
88}
89
90.hamburger span{
91    position: absolute;
92    left: 0;
93    display: inline-block;
94    width: 100%;
95    height: 2px;
96    background-color:$black;
97    transition:transform 0.3s ,background-color 0.3s;
98
99}
100
101.hamburger.is-active span{
102    background-color:$white;
103}
104
105.hamburger span:nth-child(1){
106    top: 0;
107}
108
109.hamburger span:nth-child(2){
110    top: 8px;
111    transition: opacity 0.3s;
112}
113
114.hamburger span:nth-child(3){
115    top: 16px;
116}
117
118.hamburger.is-active span:nth-child(1){
119    top: 15px;
120    transform:rotate(-45deg);
121}
122
123.hamburger.is-active span:nth-child(2){
124    opacity: 0;
125}
126
127.hamburger.is-active span:nth-child(3){
128    top: 15px;
129    transform:rotate(45deg);
130}
131
132//drawer
133
134.drawer-menu{
135    position: absolute;
136    z-index: 5000;
137    top: 0;
138    left: 0;
139    display: none;
140    width: 100%;
141    height: 100vh;
142    background-color: $blue2;
143
144}
145.drawer-menu__inner{
146    display: flex;
147    align-items: center;
148    justify-content: center;
149    width: 100%;
150    height: inherit;
151}
152
153.drawer-menu__items{
154    display: flex;
155    align-items: center;
156    justify-content: center;
157    flex-direction: column;
158}
159
160.drawer-menu__item{
161    display: inline-block;
162
163}
164
165.drawer-menu__item:not(:first-child){
166    margin-top: 25px;
167}
168
169.drawer-menu__link{
170    font-size: 16px;
171    font-weight: $medium;
172    display: inline-block;
173    padding-bottom: 25px;
174    text-align: center;
175    letter-spacing: 0.05em;
176    color:$white;
177    border-bottom: 1px solid $gray2;
178    width: 200px;
179
180}
181
182.drawer-menu__link--contact{
183padding: 14px 14px;
184transform: background-color 0.3s;
185border: none;
186background-color: $red;
187&:hover{
188    background-color: $red2;
189    opacity: 1;
190}
191}
192
193//main view
194
195.mv{
196    width: 100%;
197    height: 100vh;
198}
199
200.mv__inner{
201    position:relative;
202    width: 100%;
203    height: inherit;
204
205}
206
207.mv__slider,
208.swiper-slide picture,
209.swiper-slide source,
210.swiper-slide img{
211    height: inherit;
212}
213
214.swiper-slide img{
215    object-fit: cover;
216}
217
218.mv__title-wrap{
219    position: absolute;
220    z-index: 10;
221    top: 50%;
222    left: 50%;
223    transform: translate(-50%,-50%);
224    width: 100%;
225}
226
227.mv__logo{
228    width: 244px;
229    height: auto;
230    margin: 0 auto;
231    @include mq("lg"){
232    width: 205px;
233    }
234}
235
236.mv__title{
237    font-size: 42px;
238    font-weight: $medium;
239    color: $white;
240    text-align: center;
241    margin-top: 20px;
242    @include mq("lg"){
243    font-size: 30px;
244    line-height: 1.1;
245    letter-spacing: 0.05em;
246    }
247}
248
249.mv__title-large,
250.mv__title-strong{
251    font-size: 60px;
252    @include mq("lg"){
253        font-size: 38px;
254    }
255}
256.mv__title-large{
257    color: $red;
258}
259
260.mv__title-strong{
261    color: $green;
262}
263
264
265//about
266.about{
267padding: 100px 0;
268@include mq("md"){
269padding-top: 105px;
270}
271}
272.about__inner{
273display: flex;
274align-items: flex-start;
275}
276
277.about__sub-title{
278    margin-top: 30px;
279    @include mq("md"){
280        margin-top: 26px;
281    }
282}
283
284.about__text{
285    margin-top: 30px;
286    @include mq("md"){
287        margin-top: 26px;
288    }
289}
290
291.about__img{
292    width: 44%;
293    margin-left: 30px;
294}
295//共通パーツ
296.inner{
297    width: 100%;
298    max-width: 1080px;
299    margin-right: auto;
300    margin-left: auto;
301    padding: 0 25px;
302    @include mq("md"){
303    padding: 0 15px;
304    }
305}
306.section-title__main{
307font-size: 36px;
308font-weight: $medium;
309line-height: 1.4;
310letter-spacing: 0.05em;
311}
312
313
314.section-title__sub{
315    font-size: 12px;
316    margin-top: 3px;
317    letter-spacing: 0.05em;
318    color: $red;
319    @include mq("md"){
320    font-size: 10px;
321    }
322}
323
324.section-title.section-title--center{
325    text-align: center;
326    @include mq("md"){
327    text-align: left;
328    }
329}
330
331.text{
332    font-size: 15px;
333    font-weight: $medium;
334    line-height: 1.867;
335    letter-spacing: 0.05em;
336    @include mq("md"){
337    font-size: 14px;
338    line-height: 2.143;
339    }
340}
341
342.text--large{
343    font-size: 24px;
344    line-height: 1.75;
345    @include mq("md"){
346    font-size: 20px;
347    line-height: 1.9;
348    }
349}
350
351.text.text--reverse{
352color: $white;
353
354}
355
356.button{
357    font-size: 20px;
358    width: 235px;
359    display: inline-block;
360    padding: 15px 15px;
361    transition:background-color 0.3s,box-shadow 0.3s;
362    background-color: $red;
363    color:$white;
364    letter-spacing: 0.05em;
365    box-shadow: 2px 2px 4px rgba($color: $gray2, $alpha:0.5);
366    &:hover{
367        opacity: 1.0;
368        border-color: $red2;
369        box-shadow: none;
370    }
371}
372
373.md-none{
374    @include  mq("md"){
375        display:none;
376    }
377    }
378
379   .md-show{
380        display: none;
381    @include  mq("md"){
382        display: block;
383    }
384    }
385

試したこと

・scssの.mv内heightについて100vh→30vhとすると、その下の画像や文章を確認できることから読込はできている。
・cssにoverflow:hidden;はなし。
・html+scssだとスクロールできないため、scssが怪しいと考えている。

###補足
字数の関係でmetaタグなど関係なさそうな部分の省略あり。

Cocode

2023/02/04 12:57 編集

第三者が自身の環境で不具合を再現できるコードを提示していただければ回答がつきやすくなると思います！今のままですとコンパイルエラーになりCSSが生成できず、私のパソコンではブラウザに表示することができません。デバッグ（不具合を再現してからコードを確認します）するために、必要なコードをすべて提示して（または省いたり改変して）いただければ幸いですー！具体的に言いますと変数やmixinが邪魔していますので、変数・mixinの定義も提示する、または変数・mixinを使用しないコードに書き換えていただれば助かります。