フーノページ

JavaScript : スクロールのインジゲータを作成。

〽️ 一目で位置がわかるよう・・。

新たな野望（笑）。

こんにちは、「ふ」です。
以前作った、「JavaScriptによるスナップスクロール」。その完成後。

JavaScriptでもスナップスクロール。

新たな野望が生まれる。

現在のスクロール位置が認識できるように、画像の下にインジゲータを表示したい。
今回これに挑戦したいと思います。

要素の数だけ●を表示。

インジゲータの「●」を配置する親要素を作っておきます。

HTML

JavaScriptのappendChild()を使って、「indicate」の内部に「●」を書き込みます。
「●」の文字実体参照は「●」です。

JavaScript

「「３//要素を作成」」 var maru = document.createElement("div"); 「「３//要素のhtml」」 maru.innerHTML = "●"; 「「３//親要素を取得」」 var indicate = document.getElementById("indicate"); 「「３作成した要素を子要素として追加」」 indicate.appendChild(maru);

ブラウザ

「●」が子要素として追加されました。
このcodeをfor文で囲んで、５個追加してみます。親要素取得の１文だけはグローバルで扱いたいので、{ }の外に出しておきましょう。

JavaScript

「「３//親要素取得はグローバルで扱う。」」 var indicate = document.getElementById("indicate"); 「「１for(i = 1; i <= 5; i++)」」 { var maru = document.createElement("div"); maru.innerHTML = "●"; indicate.appendChild(maru); }

ブラウザ

子要素が５個追加されました。縦並びではしょうがないので、flexboxを使って中央揃いの横並びにします。

CSS

#indicate { display:flex; 「「３/*中央に要素を揃える*/」」 justify-content : center; }

ブラウザ

原型ができました。次に、現在のスクロール位置を表示するために、colorを変えていきます。
現在位置の「●」を青に、その他は薄いグレーにしてみます。CSSではなくJavaScript内で指定しましょう。

JavaScript

「「３//基本の色」」 indicate.style.color = "lightgray"; 「「３//現在のスクロール位置の色」」 indicate.「「１children[0]」」.style.color = "blue";

ブラウザ

これでUIは完成です。うまくできましたか？

スクロール画面に取り込もう。

では実際に、スクロールのUIにインジゲータを取り込んでいきましょう。以前作ったUIをそのまま使います。
詳細を確認したい方のために、再度リンクを貼っておきます。

JavaScriptでもスナップスクロール。

スクロールエリアとボタンの間にインジゲータを追加しましょう。

HTML

「「３//横スクロール部分。３枚の画像を配置」」

「「１//インジゲータを追加

」」「「３//ボタンエリア。」」

「「３〜略〜」」

ブラウザ

こんな感じになりました。
〜腑に落ちない点があります。画像は３枚なのに、インジゲータの「●」は５個になっています。画像の数と同じにしたいですよね。

以前の記事で、確か画像スクロール部分の要素は変数「element」で取得していました。

var element = document.getElementById("jsnap");

「●」の数はfor文の条件内で設定していましたよね。その条件を「element」の要素数に変更しましょう。

for(i = 1; i <= 「「１element.children.length」」; i++) { var maru = document.createElement("div"); maru.innerHTML = "●"; indicate.appendChild(maru); }

ブラウザ

はい ♪ 「●」の数が画像と同じになりました。

「●」をスクロールに連動させる。

扨（さて）、いよいよインジゲータを画像のスクロールに連動させていきましょう。これも以前の記事になりますが、スクロールエリアの親要素を「jsnap」、子要素である各画像を参照するための番号を変数「num」としていました。

「「３//子要素を参照するための番号」」 var num = 0;

この「num」をインジゲータの「●」の管理にも使います。画像をスクロールさせると、「num」番目の「●」が青色になるための関数を定義しましょう。

「「３//スクロールを進めたとき」」 function maru_susumu () { //「num」番目の「●」を青色に。 indicate.children[「「１num」」].style.color = "blue"; //前の「●」をgrayに。 indicate.children[「「１num-1」」].style.color = "lightgray"; } 「「３//スクロールを戻したとき」」 function maru_modoru () { //「num」番目の「●」を青色に。 indicate.children[「「１num」」].style.color = "blue"; //前の「●」をgrayに。 indicate.children[「「１num+1」」].style.color = "lightgray"; }

スナップスクロール部分の「susumu( )」「modoru( )」関数では、変数「num」をそれぞれインクリメント、デクリメントさせています。その後で「maru_susumu( )」「maru_modoru( )」関数を実行させましょう。

できました。

実際に動きます。▼

お疲れ様でした、完成です ♪
「●」の数はimgの要素数に対応させているので、汎用的に使えて便利です。

今回の全コードはココに貼っておきます。よかったら是非、自分のサイトに取り入れてみてください。