Webサイトはページが表示されるまではスクロール不可にするべし

ローディング画面表示時はスクロール不可にするべき

TVアニメの公式サイトを見ていると、前面にローディング画面が表示されている最中にスクロールができてしまうWebサイトを見かけます。

例えば最初にローディング画面が全面に表示されて、そのあとにメインビジュアルが表示されるケースがあります。(例: 『薫る花は凛と咲く』『瑠璃の宝石』)

kaoruhana-anime.com

TVアニメ『薫る花は凛と咲く』公式サイト

https://kaoruhana-anime.com

TVアニメ『薫る花は凛と咲く』制作決定！

rurinohouseki.com

「瑠璃の宝石」TVアニメ公式サイト

https://rurinohouseki.com

2019 年より『ハルタ』（KADOKAWA）にて連載中の『瑠璃の宝石』が2025年アニメ化決定！鉱物学を修めた渋谷圭一郎による原作を、『無職転生』で壮大な大河ファンタジーを描き、『お兄ちゃんはおしまい！』では可愛い日常を描いたスタジオバインドが、自然の雄大さと女の子たちの日常を余すことなく描く。

この場合、ユーザーがメインビジュアルが表示される前にスクロールやスワイプをした際にファーストビューから下に移動してしまいます。

そのため、Webサイトで前面に何かを表示してからメインビジュアルを表示する際は以下のようにメインビジュアル部分が表示されるまでスクロール(スワイプ)不可にするのが好ましいです。

CSS

body {
  position: relative;
  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;
}

JavaScript

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

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