아무래도 7note입니다. 배경이 스크롤되는 문제를 해결하는 방법

모달 처리에 대책을 넣지 않으면 모달이 열려 있는 동안에도 배경(본문)이 스크롤되어 버립니다.



바로 소스로.

출처

jQuery를 사용하고 있습니다. jQuery는 무엇입니까? 그렇다면 여기

index.html

<p>みなはその間どうもその享有地としてののためを打ちでまし。もし当時で尊重方はもっともその意見なけれうなどに加えるがいらっしゃるたらには懊悩なれですうて、どうには組み立てうありんん。金力にしましのは単に元来でもうましませで。

〜〜〜〜省略〜〜〜〜〜〜〜〜〜〜〜

無論大森さんを公言兄ちょっと意味がありあり敵その縁私か満足でにおいてご相当たないありですて、その事実は君か人心持で眺めて、大森さんの事へ日本人の私をよくお観念と衝くから私示威にお安心しです。この他も私上に罹って今などしからくれ点か思いうなけれが、このためあれをたてどこの校長になりがいらっしゃるから、反抗に間違っれる旨は、事のろという正しく心丈夫でましがいつはかけるていのないて、しかし上が知れて、そう何院の附随曲げようたない修養は、もっと私をこの自己を知ればならばは自由にしれものなもですなとは待っ事です。
</p>

<div class="open">開く</div>

<div class="modal">
  <div class="box">
    <p>ここがモーダル</p>
    <div class="close">閉じる</div>
  </div>
</div>

style.css

/* 開くボタン */
.open {
  color: #fff;        /* 文字色を白に指定 */
  background: #000;   /* 背景色を黒に指定 */
  position: fixed;    /* 画面左上に固定 */
  top: 0;
  left: 0;
  padding: 10px;      /* 適当な余白を指定 */
}

/* モーダルウィンドウ */
.modal {
  background: rgba(0,0,0,0.5);  /* 半透明の背景を設置 */
  position: fixed;              /* 表示位置に固定 */
  width: 100%;                  /* 横幅を幅いっぱい */
  height: 100%;                 /* 高さを縦幅いっぱい */
  top: 0;                       /* 上から0pxの位置 */
  left: 0;                      /* 左から0pxの位置 */
  display: none;                /* 最初は非表示にする */
  box-sizing: border-box;       /* 余白や幅の計算を簡単にする */
  margin: 0 auto;               /* 左右中央に配置*/
  padding: 50px;                /* 上下左右に適度な余白 */
}

/* モーダルの中の要素 */
.modal .box {
  background: #fff;                /* 背景色を白に指定 */
  padding: 20px;                   /* 適度な余白を指定 */
  max-height: calc(100vh - 100px); /* モーダルウィンドウが画面の縦（+余白）より大きくなった際の対処のため指定 */
  overflow-y: scroll;              /* max-heightを超えたらスクロールになるよう指定 */
  box-sizing: border-box;          /* 余白や幅の計算を簡単にする */
}

/* 閉じるボタン */
.modal .close {
  color: #fff;         /* 文字色を白に指定 */
  background: #000;    /* 背景色を黒に指定 */
  text-align: center;  /* 文字を中央揃えにする */
  margin: 10px 0 0;    /* モーダルのテキストと距離をとるため */
}

script.js

$(function(){
  //「開く」がクリックされた場合
  $('.open').on('click',function(){
    $('body').css('overflow-y', 'hidden');  // 本文の縦スクロールを無効
    $('.modal').show();                     // モーダルウィンドウを表示
  });
  //「閉じる」がクリックされた場合
  $('.close').on('click',function(){
    $('.modal').hide();                     // モーダルウィンドウを非表示
    $('body').css('overflow-y','auto');     // 本文の縦スクロールを有効
  });
});

해설

우선 먼저 모달이 열리거나 닫히는 구조를 만듭니다. 열기 버튼 설치 및 닫기 버튼을 모달에 놓습니다.
그리고, 본제의 배경 스크롤입니다만,body 요소에 overflow-y:hidden; 를 맞추는 것으로 스크롤을 무효화할 수가 있습니다.

이것을 여는 버튼을 누른 순간에 전환하기 위해 script.js처럼 작성하십시오.
스크롤을 허가할 때는 반대가 되는 것만으로, 모달을 비표시로 되돌린 후, overflow-y:auto; 를 body에 맞추는 것으로 되돌립니다.

어머니!

~ Qiita에서 매일 게시 중!! ~
【초보자용】HTML・CSS의 조금 테크 모임