ローディング判定やスクロール判定をbodyで一元管理すると捗る

2019年11月28日2021年11月27日

ローディング判定やスクロール判定は色んな要素で使われますが、この判定をbodyなどの全体に影響を与える部分で管理させておくとコーディングが楽になります。

具体的に、画面のローディングが完了したらdata-loading="true"、スクロールしたらdata-scroll="true"のように属性を付与してあげて、サイト全体で使えるようにして上げる方法です。

実際に読み込んだりスクロールした時のbodyタグの挙動になります。この付与された属性を用いてCSSを指定してあげると管理しやすくなるはずです！

はにわまん

data属性での管理はCSSだけでなくJavaScriptでも扱いやすくて、割とお気に入りです！

ローディング時に`data-loading="true"`を付与する

jQuery依存で恐縮ですが、、、jQuery(window).on("load"が読み込み完了時の処理とすることができます。

jQuery(window).on("load", function() {
	jQuery("body").attr("data-loading", "true");
});

読み込みが完了したら、bodyタグに対してattr("data-loading", "true")で属性を付与してあげる簡単な処理になります。

読み込みの時間制限をつけたい場合

あまりにも重たいページなど、DOMの読み込みを待っていたら遅すぎるケースもあるかもしれません。そういった場合は、○秒を超えたらdata-loading="true"を付与するという処理を加えておくと、強制的に読み込みを完了させることができます（属性的には）

jQuery("body")
    .delay(3000)
    .queue(function() {
        jQuery(this)
            .attr("data-loading", "true")
            .dequeue();
    });

上記の場合は、3秒（3000ms）の遅延の後にattr("data-loading", "true")になるといったものです。この記述もセットで入れておくと、形だけでもローディングを終了させることができます。

ローディング時のサンプル

具体的にどういった使い方をするか、ありそうなサイトのパターンで見ていきます。ローディング画面を表示して、読み込み終わったタイミングでヘッダーを下ろしてくるようなアニメーションを付けてみます。

上の動画に必要そうな部分だけ抜粋すると以下のような感じです。

<header class="header">
	<div class="inner">
		ヘッダーのエリア
	</div><!-- /inner -->
</header><!-- /header -->

<div class="loading">
	<div class="loading-txt">ロード中です</div>
</div><!-- /loading -->

CSSは以下のような感じで、ローディング完了時にどういった表示にしたいかを[data-loading="true"]を頭につけることで表現できます。

.inner {
	width: 1000px;
	max-width: 100%;
	margin: 0 auto;
}

.header {
	height: 60px;
	padding: 16px 0;
	position: absolute;
	top: -60px;
	left: 0;
	width: 100%;
	transition: all 0.6s ease-in 0s;
	z-index: 20;
	background: #fff;
}

[data-loading="true"] .header {
	top: 0;
	position: fixed;
}

.loading {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: #fff;
}

.loading .loading-txt {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 52px;
	font-weight: 700;
}

[data-loading="true"] .loading {
	display: none;
}

bodyに[data-loading="true"]があることによって、どの要素にもローディング時の処理を簡単に付けられるのが、この書き方のいいところだと思います。

スクロール時に`data-scroll="true"`を付与する

こちらもjQuery依存で恐縮です。変数のlengthは、スクロール距離を入れます。この例では100pxスクロールしたらdata-scroll="true"をbodyに付与するといった処理です。

jQuery(window).on('scroll', function() {
    let length = 100;
    if (length < jQuery(this).scrollTop()) {
        jQuery('body').attr('data-scroll', 'true');
    } else {
        jQuery('body').attr('data-scroll', 'false');
    }
});

メインビジュアルを超えたらスクロールとする場合

100pxでなく特定のところまでスクロールしたら、、、という処理に変えることも簡単にできます。例えば、ヘッダー下によくあるメインビジュアルを超えた場合にスクロールしたことにしたい場合は以下のように変更するだけでOKです。

jQuery(window).on('scroll', function() {
    let length = 100;
    if (jQuery('.js-mv').length) {
        length = jQuery('.js-mv').innerHeight();
    }
    if (length < jQuery(this).scrollTop()) {
        jQuery('body').attr('data-scroll', 'true');
    } else {
        jQuery('body').attr('data-scroll', 'false');
    }
});

.js-mvはメインビジュアルのクラスとして指定してあげてください。これで、100pxだったlengthがメインビジュアルの高さに書き換えられます。

スクロール時のサンプル

スクロール時の処理のサンプルとして、メインビジュアルを超えたらヘッダーの色が反転するという処理をしていみます。

スクロール距離を表すメインビジュアルに.js-mvクラスをつけてあげてください。（付けない場合は100pxでスクロール判定となります）

<header class="header">
	<div class="inner">
		ヘッダーのエリア
	</div><!-- /inner -->
</header><!-- /header -->

<div class="mv js-mv">
</div><!-- /mv -->

CSSは[data-scroll="true"]を頭につけてあげることで、スクロール時の動きを指定することができます。

.header {
	height: 60px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transition: all 0.6s ease-in 0s;
	z-index: 20;
	background: #fff;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
}

[data-scroll="true"] .header {
	background: #000;
	color: #fff;
}

.mv {
	height: 600px;
	width: 100%;
	background: #eee url(mv.jpg) no-repeat top center / cover;
	position: relative;
}

トップへ戻るボタンも、[data-scroll="true"] .totopみたいな同様の書き方で実現できるので、スクロール系の処理も一言管理できて楽になります。

（余裕がある人は以下の記事のコードも書き換えてみてください）
https://haniwaman.com/floating/