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

[mnfdann1]

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

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

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初心者のため教えていただきたいです。

[Qcoltd]

@mnfdann1 様

https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAq-a/%E3%83%AD%E3%83%BC%E3%83%87%...

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

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

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

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

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

ご参考まで。

(キュー田辺)

[mnfdann1]

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

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

[Qcoltd]

@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");
  });
});

ご参考まで。

(キュー田辺)

[mnfdann1]

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

ですが、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回のみの表示にしているのですが、表示されてしまいます。

お手数ですが何か解決方法をご存知でしょうか？

よろしくお願いいたします。

[Qcoltd · Accepted solution]

@mnfdann1 様

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

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

ご参考まで。

(キュー田辺)

[mnfdann1]

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

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

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