

以下のコードが機能しません。自分のパソコン以外だとうまくいくのかもしれません。

[code]

    body.noscroll {
        overflow: hidden;
    
[/code]

* * *

### 実際の表示例

**スクロール前の画像**  
[![スクロール前の画像](https://i.stack.imgur.com/hO1lt.png)](https://i.stack.imgur.com/hO1lt.png)

**スクロール後の画像**  
[![スクロール後の画像](https://i.stack.imgur.com/ZLIDG.png)](https://i.stack.imgur.com/ZLIDG.png)

### 現状のソースコード

[code]

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    
    <script>
        $(function(){
            $(".question-outer dt").on("click",function(){
                $(this).next().slideToggle();
                $(this).toggleClass("open");
            })
        })
    //sticky header
      $('.header-burger-btn').on('click',function(){
              $('.header-nav').fadeToggle(300);
              $('.header-burger-btn').toggleClass('cross');
              $('body').toggleClass('noscroll');
            });; 
    </script>
    
    
[/code]

**CSS**

[code]

    @media screen and (max-width: 1024px) {
    
      .header{
        width: 1000px;
      }
      .header-wrapper-second .header-outer {
        display: none;
      }
    
      .header-wrapper-second .header-outer-second {
        display: none;
      }
      .header-burger-btn .bars {
        height: 6px;
        width: 40px;
        background-color: #1B224C;
        display: block;
        position: absolute;
        top: 40px;
        right: 50px;
      }
    
    
    
      .header-burger-btn .bar_top {
        margin-top: -15px;
      }
      .header-burger-btn .bar_bottom {
        margin-top: 15px;
      }
    
    .cross .bar_top{
        transform: rotate(40deg) translate(6px, 14px);
        transition: 0.3s;
        background-color: #fff;
        z-index: 3;
      }
    
    .cross .bar_mid {
        opacity: 0;
        transition: 0.3s;
      }
    
     .cross .bar_bottom {
        transform: rotate(-40deg) translate(6px, -14px);
        transition: 0.3s;
        background-color: #fff;
        z-index: 3;
      }
    
      section.list-wrapper {
        height: 700px;
        padding: 120px;
      }
    
      .title-contact-wrapper {
        padding-right: 27px;
      }
    
    
    
    
      .header-nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #282F35;
        z-index: 1;
      }
    
      header .header-container .header-nav-color{
        padding-right: 0px;
        color: #fff;
      }
    
    
      .header-nav .header-nav-list {
        height: 100%;
        flex-direction: column;
        align-items: center;
        color: #fff;
        margin: 0 auto;
        z-index: 1;
        padding: 120px 0 0;
      }
    
    
    body.noscroll {
        overflow: hidden;
        position: relative;
      }
      .header-nav .header-nav-list .header-nav-item {
        margin: 0 0 30px;
        color: #fff;
      }
      .header-nav .header-nav-list .header-nav-item .header-nav-item:last-of-type {
        margin-bottom: 0;
      }
    
[/code]

**HTML**

[code]

    <!DOCTYPE html>
    <?php
    /*
    template Name:トップページ
    */
    ?>
    <html lang="ja">
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width,initial-scale=1" />
      <meta name="keywords" content="共通キーワード" />
      <meta name="description" content="共通ディスクリプション" />
    
    
      <title>Engress</title>
      <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/assets/css/styles.css" />
      <?php wp_head(); ?>
    </head>
    <body class="body">
        <div class="noscroll">
    <header class="header"> 
        <div class="header-container">   
        <div class="header-wrapper">      
        <div class="header-logo">
            <img src="<?php echo get_template_directory_uri(); ?>/assets/images/logo1.png"/>
        </div>
        <nav class="header-nav">
            <ul class="header-nav-list">
                <li class="header-nav-item"><a class="header-nav-item-second">ホーム</a></li>
                <li class="header-nav-item"><a class="header-nav-item-third">お知らせ</a></li>
                <li class="header-nav-item"><a class="header-nav-item-fourth">ブログ</a></li>
                <li class="header-nav-item"><a class="header-nav-item-fifth">コース・料金</a></li>
            </ul>
        </nav>
        </div>    
        <div class="header-wrapper-second">
            <div class="header-outer">
             <p class="header-time">平日08:00〜20:00</p>
             <div class="header-content">
           <img src="<?php echo get_template_directory_uri(); ?>/assets/images/pus 29.png" class="main-logo" alt="Engress"/>
                <div class="telephone-number">0123-456-7890</div>
            </div>    
            </div>
            <div class="header-outer-second">
                <div class="header-content-second">
                    <div class="header-btn-outer">
                    <a href="#" class="header-btn"  style="text-decoration: none;"><p class="header-btn-name">資料請求</p></a>
                    </div>
                    <div class="header-btn-outer-second">
                    <a href="#" class="header-btn-second"  style="text-decoration: none;"><p class="header-btn-name">お問い合わせ</p></a>
                    </div>
                </div>
            </div>
        <div class="header-burger-btn">
            <div class="bars  bar_top"></div>
            <div class="bars bar_mid"></div>
            <div class="bars bar_bottom"></div>
        </div>
         </div>
         </div>
    
    </header>
    
[/code]


CC BY-SA 4.0
2022-01-29T07:41:22.243
85996
2022-02-22T08:13:08.407
2022-02-07T06:32:25.070
3060
49042
question
html css
.noscroll { overflow: hidden; position: relative; } が適用されず、スクロールできてしまう


再現できなかったのですが、html, body,
noscrollそれぞれに対して、height:100%を付与して高さを定義してあげるとうまく動くかもしれません。


CC BY-SA 4.0
2022-02-08T06:24:20.477
86201
2022-02-08T06:24:20.477
9240
85996
answer


`position: fixed;` の記述で、ボタン部分を固定することにしました。  
未だにスクロール自体を止めることは出来ませんが。

[code]

     .cross .bar_top {
        transform: rotate(40deg) translate(6px, 8px);
        transition: 0.3s;
        background-color: #fff;
        z-index: 3;
        position: fixed; 
        
      }
    
    .cross .bar_mid {
        opacity: 0;
        transition: 0.3s;
        z-index: 3;
      }
    .cross .bar_bottom {
        transform: rotate(-40deg) translate(6px, -8px);
        transition: 0.3s;
        background-color: #fff;
        z-index: 3;
        position: fixed; 
      }
    
    
[/code]


CC BY-SA 4.0
2022-02-22T07:32:22.023
86511
2022-02-22T08:13:08.407
2022-02-22T08:13:08.407
3060
49042
85996
answer