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

ローディング判定やスクロール判定は色んな要素で使われますが、この判定を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みたいな同様の書き方で実現できるので、スクロール系の処理も一言管理できて楽になります。

(余裕がある人は以下の記事のコードも書き換えてみてください)

スクロールの途中で出現するフローティングボタンのJavaScript

おわり

ローディング判定やスクロール判定をbodyで管理するというお話でした。この辺の処理をbodyに持たせる用になってから随分とコーディングが楽になったような気がします。

こういった共通で使えそうな処理判定は、上の方のbodyあたりに持たせておくと、CSSでの記述に悩まずに楽になるかもしれません。

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事