ローディング判定やスクロール判定はdata属性での一括管理が便利
ローディング判定やスクロールされた時など、html要素にdata属性をつけて一括管理するとコーディングやメンテナンスがすごく楽になります。
例えば、スクロールされたらdata-scrolled="true"といった属性を付与することで、サイト全体でスクロール処理ができるようになり、CSSもシンプルに書くことができます。
詳しくは以下で解説していきます。
どのようなdata属性をつけるか
具体的には以下のような感じで、カスタムデータ属性を付与します。
<html lang="ja" data-loaded="false" data-scrolled="false" data-drawer-open="false">カスタムデータ属性の名前はdata-xxxのような形で自由につけることができるので、状態が連想できればなんでも構いません。
data-loaded：ローディングされたかどうかdata-scrolled：スクロールされたかどうかdata-drawer-open：ドロワーメニューが開かれているかどうか
trueであればYES、falseであればNO、という具合でJavaScriptで値を制御します。
つまり、検証の際にこの要素だけ見れば今どんな状態かが一目で分かるようになります。
CSSの記述が楽
CSSによるスタイリングも、一貫性があり、状態表示が明示的で分かりやすいです。
/* 読み込みが完了したらローディング画面を非表示 */
[data-loaded=true] .loader {
opacity: 0;
visibility: hidden;
}
/* スクロールされたらページトップボタンを表示 */
[data-scrolled=true] #to-top {
opacity: 1;
visibility: visible;
}
/* ドロワーメニューが開いた時の動作 */
[data-drawer-open=true] {
.drawer-icon {
}
.drawer-content {
}
body {
overflow: clip;
}
}JavaScriptの記述方法
JavaScriptは、メンテナンス性を上げるために最初の方にまとめておきます。
/**
* 状態管理
*/
const html = document.documentElement;
// ローディング判定
window.addEventListener("load", () => {
html.setAttribute("data-loaded", "true");
});
// スクロール判定
window.addEventListener("scroll", function () {
if (window.scrollY > 100) {
html.setAttribute("data-scrolled", "true");
} else {
html.setAttribute("data-scrolled", "false");
}
});
// ドロワーメニュー開閉状態
document.querySelector(".drawer-icon").addEventListener("click", function () {
const isOpen = html.getAttribute("data-drawer-open") === "true";
// 状態を判定してトグル
html.setAttribute("data-drawer-open", isOpen ? "false" : "true");
});こちらは基本的な記述例なので、必要に応じてカスタマイズしてください。
クラス名で管理はダメなのか
.is-loadedのようにクラス名で管理するのも悪くないですが、他のクラスと混在した場合に見通しが悪くなります。
また、プラグインなどで自動付与されるクラスとのバッティングも防ぐと言う意味でも、状態管理はdata属性が適していると考えています。
body要素ではダメなのか
body要素にdata属性をつけても問題ありません。
しかし、body要素には様々なクラスや属性が混在するケースが（WordPressは特に）多いので、見通しがしやすいという意味でhtml要素につけています。
参考にした記事では、body要素を例として紹介されていました。
状態管理はdata属性がベスト
data属性の一括管理にして、メンテナンスがすごく楽になりました。
アクセシビリティのことを考えるとWAI-ARIAで管理する方が良いのかもしれませんが、サイトを保守する人がどこまで理解できるのか問題と、JavaScriptがかなり複雑になりそうなのでdata属性管理がベストだと考えています。
カスタマイズに困ったらお気軽にご相談を！
- 「ちょっとしたCSSの調整だけお願いしたい」
- 「不具合を直してほしい」
料金は3,000円〜、お支払いは銀行振込・Amazonギフトカードなど柔軟に対応してます🤔
お気軽にコメントどうぞ