JavaScriptでモーダルウィンドウを開いた時にBODYのスクロールを防止する

モーダルを開いた時にBODYのスクロールを防止する

JavaScript

overflow プロパティを使用する

最も簡単な方法は、body 要素に overflow: hidden; を設定することです。これは、モーダルが開いている間、BODY要素のスクロールを無効にします。

const modal = document.querySelector('.modal');

modal.addEventListener('open', () => {
  document.body.style.overflow = 'hidden';
});

modal.addEventListener('close', () => {
  document.body.style.overflow = 'auto';
});

position: fixed; を body 要素に設定すると、モーダルが開いている間、BODY要素が画面に固定されます。

const modal = document.querySelector('.modal');

modal.addEventListener('open', () => {
  document.body.style.position = 'fixed';
});

modal.addEventListener('close', () => {
  document.body.style.position = 'static';
});

jQuery

上記の方法をjQueryで記述すると以下のようになります。

$('.modal').on('open', function() {
  $('body').css('overflow', 'hidden');
});

$('.modal').on('close', function() {
  $('body').css('overflow', 'auto');
});

$('.modal').on('open', function() {
  $('body').css('position', 'fixed');
});

$('.modal').on('close', function() {
  $('body').css('position', 'static');
});

CSS

overflow: hidden; を .modal 要素に設定すると、モーダルウィンドウ内のみスクロール可能になります。

.modal {
  overflow: hidden;
}

注意点

• モーダルウィンドウ内にスクロールバーが必要な場合は、.modal 要素に overflow-y: scroll; を設定する必要があります。
• iOS Safariでは、position: fixed; を使用すると、モーダルウィンドウが画面上部にずれてしまうことがあります。この問題を解決するには、-webkit-overflow-scrolling: touch; を .modal 要素に設定する必要があります。

上記の方法を参考に、モーダルウィンドウを開いた時にBODYのスクロールを防止するように実装してください。

HTML

<button id="open-modal">Open Modal</button>

<div class="modal">
  <h1>Modal Title</h1>
  <p>This is a modal window.</p>
  <button id="close-modal">Close Modal</button>
</div>

JavaScript

const modal = document.querySelector('.modal');
const openModalBtn = document.getElementById('open-modal');
const closeModalBtn = document.getElementById('close-modal');

openModalBtn.addEventListener('click', () => {
  modal.classList.add('open');
  document.body.style.overflow = 'hidden';
});

closeModalBtn.addEventListener('click', () => {
  modal.classList.remove('open');
  document.body.style.overflow = 'auto';
});

jQuery

$('.modal').on('open', function() {
  $('body').css('overflow', 'hidden');
});

$('.modal').on('close', function() {
  $('body').css('overflow', 'auto');
});

$('#open-modal').on('click', function() {
  $('.modal').addClass('open');
});

$('#close-modal').on('click', function() {
  $('.modal').removeClass('open');
});

CSS

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;

  &.open {
    opacity: 1;
    visibility: visible;
  }
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  width: 80%;
  max-width: 500px;
}

このコードを参考に、モーダルウィンドウの実装をカスタマイズしてください。

• モーダルウィンドウを開閉するアニメーションを追加したい場合は、CSSの transition プロパティを使用することができます。
• モーダルウィンドウの背景にぼかし効果を追加したい場合は、filter: blur(5px); を .modal 要素に設定することができます。
• モーダルウィンドウを閉じるための別の方法として、Escキーを押した時に閉じるように実装することができます。

BODYのスクロールを防止する他の方法

overflow-y: auto; を html 要素に設定する

この方法は、モーダルウィンドウを開いた時に、画面全体のスクロールを無効にします。

html {
  overflow-y: auto;
}

• この方法は、モーダルウィンドウ内のみスクロールできるようにしたい場合は使用できません。
• iOS Safariでは、この方法が効かない場合があります。

position: absolute; を body 要素に設定する

body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

スクロールバーを隠す

モーダルウィンドウを開いた時に、スクロールバーを隠すことで、ユーザーがスクロールできないようにすることができます。

body::-webkit-scrollbar {
  display: none;
}

• この方法は、ユーザーがスクロールできないことを分かりやすく伝える必要があります。