モーダルが消えてからスクロール可能にするサンプル

body {
  position: relative;
  text-align: center;
  overflow: hidden;
}

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 2em;
  z-index: calc(Infinity);
  opacity: 1;
  transition: opacity 1s ease;
}

.modal.hide {
  opacity: 0;
  pointer-events: none;
}

// 3秒後にモーダルをフェードアウト
window.onload = () => {
  setTimeout(() => {
    const modal = document.querySelector('.modal')
    modal.classList.add('hide')

    // フェードアウト完了後にスクロールを有効化
    setTimeout(() => {
      document.body.style.overflow = 'auto'
    }, 1000) // フェードアウト時間に合わせて1秒待つ
  }, 3000) // 3秒待ってからフェードアウト開始
}

元記事を表示する