ローディング画面中はスクロールを禁止したい

日本語 ディスカッション 技術的なQ＆A

Topic summary

ローディング画面表示中にスクロールを禁止し、ローディング終了後に再びスクロール可能にする実装方法についての質問です。\n\n初期の問題:\n- ローディング画面中もスクロールができてしまう状態\n- JavaScriptとCSSでローディング画面を実装済み\n\n解決プロセス:\n- 最初はCSSのoverflow: hiddenを#loadingに適用する提案がありましたが、ローディング終了後もスクロールできない問題が発生\n- body要素に対してJavaScriptでクラスを追加・削除する方法に変更:\n - ページ読み込み時にbodyにremove-scrollingクラスを追加\n - ローディング終了後にクラスを削除\n\n追加の課題:\n- TOPページ以外(about、flowなど)でローディング画面が表示されないのに、スクロールが禁止される問題が発生\n- sessionStorageで初回のみ表示する実装との競合\n\n最終的な解決策:\n- `if ($(

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

ローディング画面中でもスクロールが出来てしまう為、出来ないようにしたいです。

また、ローディング画面が終わったらスクロール出来るようにしたいです。

css

#loading {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #fefefc;
}

Javascript

$(window).on(“load”, function () {
$(“#loading”).delay(4000).fadeOut(“slow”);
});

上記はローディング画面表示のコードです。
Javascript初心者のため教えていただきたいです。

2

@mnfdann1 様

https://community.shopify.com/post/2273288

こちらにも回答しましたが、

CSSを記載いただいていたので、

もう一度回答いたします。

下記のようにCSSを設定されれば良いかと思います。

#loading {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #fefefc;
height: 100%; 
overflow: hidden; 
}

ご参考まで。

(キュー田辺)

3

ご返信ありがとうございます！

記述したところローディング画面が終わってもスクロールが出来なくなってしまったのですが、どのような解決策があるでしょうか？

4

@mnfdann1 様

失礼しました。

確認したところ、bodyに対して処理を行わなければいけないようでした。

(逆に先述のCSSでスクロールできなくなったのが不思議ですが。。。)

JavaScriptで処理をした方が良さそうです。

// CSS
#loading {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fefefc;
}

.remove-scrolling {
  height: 100%; 
  overflow: hidden; 
}

// JavaScript
$(window).on("load", function () {
  $("body").addClass("remove-scrolling");
  $("#loading").delay(4000).fadeOut("slow", function(){
    $("body").removeClass("remove-scrolling");
  });
});

ご参考まで。

(キュー田辺)

5

無事にスクロール出来るようになりました。ご回答ありがとうございます！

ですが、TOPページ以外のtemplatesで作成した

・〜.com/pages/about

・〜.com/pages/flow

上記のページに遷移する時に、ローディング画面は見えませんがローディングが終わるまでスクロールが出来なくなっています。

(function () {
const keyName = ‘visited’;
if (!sessionStorage.getItem(keyName)) {
sessionStorage.setItem(keyName, true);
} else {
document.getElementById(“loading”).style.display = “none”;
}
})();

上記のコードで1回のみの表示にしているのですが、表示されてしまいます。

お手数ですが何か解決方法をご存知でしょうか？
よろしくお願いいたします。

6

@mnfdann1 様

では、このようにされると良いですよ。

$(window).on("load", function () {
  if ($("#loading").is(':visible')){
    $("body").addClass("remove-scrolling");
    $("#loading").delay(4000).fadeOut("slow", function(){
      $("body").removeClass("remove-scrolling");
    });
  }
});

ご参考まで。

(キュー田辺)

7

ご回答ありがとうございます。

教示いただいたコードを記述すると上手く動きました！

すごく苦戦していたので本当に助かりました！ありがとうございました！

1 Like