FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

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

解決済

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

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

 

1 件の受理された解決策
Qcoltd
Shopify Partner
1120 453 448

成功

@mnfdann1 様

 

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

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

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

6件の返信6

Qcoltd
Shopify Partner
1120 453 448

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

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
mnfdann1
Shopify Partner
14 0 1

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

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

Qcoltd
Shopify Partner
1120 453 448

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

 

ご参考まで。

(キュー田辺)

 

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
mnfdann1
Shopify Partner
14 0 1

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

ですが、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
Shopify Partner
1120 453 448

成功

@mnfdann1 様

 

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

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

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
mnfdann1
Shopify Partner
14 0 1

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

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

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