【Vanilla JS】スクロール量をプログレスバーでページ上部に表示する方法

スマホでWebページを開くと、縦長なのでどうしてもスクロール量が多くなりますよね。

PCだと少しのスクロールでページ全体を見ることができますが、スマホだと倍以上のスクロールが必要になります。

こんなとき、今ページのどの辺にいるのか、後どのくらいでページを読み終えるのかがわかると便利ですよね。

今回の記事では、スクロール進捗度が一目でわかるプログレスバーの実装方法を紹介します!

jQueryを使わず素のJavaScriptで実装していきますので、よければ参考にしてみてください。

目次

スクロール量を表示するプログレスバーのDEMO

今回は3つのプログレスバーを作ってみましたので、DEMOページからご確認ください。

  • 単色のプログレスバー
  • グラデーションのプログレスバー
  • 複数色のプログレスバー

DEMOページ上のボタンで切り替えられるようにしていますので、それぞれ試してみてください。

スクロール量を表示するプログレスバーの実装手順

ここからは実際のコードを使って、実装方法を解説していきます。

  • HTML…プログレスバーのコンテナとバー本体を作成
  • CSS…色やサイズを調整
  • JS…スクロール量を取得してバーの横幅を伸縮させる

それぞれの役割は上記のとおりです。

コピペするだけですぐに使えるようにしていますので、解説はいらないという方はコード箇所以外は飛ばしてください。

1.HTMLでプログレスバーの要素を作成

<body>
  <div class="progress">
    <div class="progress__bar"></div>
  </div>
</body>

divタグを2つ用意し、それぞれにクラスを付けます。

こちらのコードでは、progressのクラスが付いたdivがバーを囲うコンテナの役割をし、progress__barが実際にスクロール量に応じて伸縮するバーの要素としています。

2.CSSでプログレスバーの大きさや色を調整

.progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px; /* バーの高さを指定 */
  background-color: #f3f3f3; /* バーの背景色を指定 */
  z-index: 100;
}

.progress__bar {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #1fa2ff; /* バーの色を指定 */
  height: 100%;
  width: 0; /* 初期値は0 */
}

まずはプログレスバーのコンテナのスタイルから説明します。

progressにposition: fixedを指定し、画面の上に固定させています。

バーの高さや背景色等はカスタマイズしてお使いください。

またプログレスバーがページの要素よりも上に重なるようにz-indexを設定していますが、この値も個人で調整してください。

次にプログレスバー本体のスタイルです。

position: absoluteで、コンテナを基準に位置指定をしています。

ここでleft: 0を指定しているため、左から右に伸びるようになっていますね。

バーの横幅はJavaScriptでスクロールに合わせて伸縮させるので、width: 0にしておいてください。

3.JavaScriptでスクロール量を取得してバーの横幅を伸縮させる

const progressBar = document.querySelector('.progress__bar');

window.addEventListener('scroll', () => {
  const windowYPos = window.pageYOffset;
  const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  const scrolled = (windowYPos / height) * 100;
  progressBar.style.width = scrolled + "%";
});

まず1行目では、先程作成したプログレスバー本体をquerySelectorで取得しています。

次にwindowに対してイベントリスナーを設定し、スクロールするたびに関数を実行します。

関数の中身は、以下で見ていきましょう。

ページ上でスクロールした量をpxで取得する

const windowYPos = window.pageYOffset;

pageYOffsetは、垂直方向のスクロール量をpxで返すプロパティです。

ここではwindow.pageYOffsetとしているので、ページの一番上から何pxスクロールしたかの数値を返してくれます。

ページ全体に必要なスクロール量を計算する

const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

ここでは、ページ一番下に到達するまでに必要なスクロール量を計算しています。

scrollHeightでページ全体の高さを取得し、clientHeightで表示領域の高さを取得します。

ページ全体の高さから現在表示されている領域の高さを引くことで、一番下まで到達するのに必要なスクロール量がわかりますね。

ページのスクロール進捗度を計算する

const scrolled = (windowYPos / height) * 100;

上で取得した2つの数値を使って、スクロール進捗度を割り出します。

(スクロール量 ÷ 全体のスクロール量) × 100

この式で、現在ページの何%分スクロールしたかの数値(0~100)を出すことができます。

スクロール進捗度をプログレスバーの横幅に指定する

progressBar.style.width = scrolled + "%";

最後に、プログレスバーの横幅に進捗度の数値を代入します。

CSSで、プログレスバーにwidth: 0を指定しましたね。

このwidthの値をスクロールするたびにJavaScriptで上書きすることで、スクロールに応じて伸縮するプログレスバーが完成します!

【応用編】グラデーションや複数色のプログレスバーをきれいに表示する方法

ここからは、プログレスバーを実装するもう一つの方法を紹介していきます。

  • グラデーションカラーのプログレスバーを実装したい
  • 複数色のプログレスバーを実装したい

という方は一度目を通してみてください。

DEMOページの「DEMO3」を見ていただきたいのですが、上で紹介した方法で3色のバーを実装すると、以下のような見た目になります。

続いてDEMOページの実物を見てみましょう。

100%のときの最終的な見た目は同じですが、途中のバーの色の割合が違っていますよね。

上は常に3色が見える状態なのに対し、下はある一定まで進むと色が変わる仕組みになっています。

ここでは、下の画像と同じような見た目にするためのコードを紹介します。

応用編プログレスバーの仕組み

上で紹介した方法では、コンテナの背景色に灰色を指定し、バー本体にメインの青色を付けましたね。

応用編では、これと全く逆のことをします。

左が上で紹介した通常のプログレスバーで、右が今回の応用編のプログレスバーです。

こちらのバージョンでは、コンテナにメインの色を指定し、バーを目立たない色にして被せることで実装しています。

DEMOページを見ていただくと、バーが右に伸びているように見えますが、実際は灰色のバーが上に重なっていて、右に縮んでいく仕組みになっています。

それでは実際のコードを見ていきましょう。

応用編プログレスバーの実装手順

ほとんど共通のコードなので、違いがある箇所のみ説明していきますね。

HTML

<body>
  <div class="progress">
    <div class="progress__bar"></div>
  </div>
</body>

HTMLは全く同じものを使用します。

CSS

.progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px; /* バーの高さを指定 */
  background: linear-gradient(90deg, #1fa2ff 0%, #1fa2ff 33.3%, #12d8fa 33.3%, #12d8fa 66.6%, #a6ffcb 66.6%, #a6ffcb 100%); /* バーのメインカラーを指定 */
  z-index: 100;
}

.progress__bar {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #f3f3f3; /* バーの色を指定 */
  height: 100%;
  width: 100%; /* 初期値は100 */
}

まずプログレスバーのコンテナにメインの色を指定します。

複数色を付けるには、以下のように指定しましょう。

background: linear-gradient(90deg, 
            #1fa2ff 0%, #1fa2ff 33.3%,
            #12d8fa 33.3%, #12d8fa 66.6%,
            #a6ffcb 66.6%, #a6ffcb 100%);

ここでは3色に分割していますが、もっと色を増やすこともできるので、いろいろ試してみてください。

DEMO2のようなグラデーションカラーは、以下のように指定します。

background: linear-gradient(90deg, #1FA2FF 0%, #12D8FA 50%, #A6FFCB 100%);

次にプログレスバー本体には、薄い灰色を指定します。

先程はleft: 0にしていましたが、今回は右端が起点になるためright: 0にします。

また、初期の状態ではメインカラーを覆い隠す必要があるので、width: 100%を指定します。

これで、スクロールする前は灰色のバーしか見えない状態になりますね。

JavaScript

const progressBar = document.querySelector('.progress__bar');

window.addEventListener('scroll', () => {
  const windowYPos = window.pageYOffset;
  const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  const scrolled = (windowYPos / height) * 100;
  progressBar.style.width = (100 - scrolled) + "%";
});

JavaScriptは、7行目以外は全て同じです。

progressBar.style.width = (100 - scrolled) + "%";

このコードでプログレスバーの横幅を指定しているのですが、初期値は100%で、スクロールするにつれて0%になっていくという意味になります。

これで、DEMOページと同じ仕様のプログレスバーが実装できます!

【滞在率UP】スクロール進捗度がわかるプログレスバーを実装しよう!

以上、スクロール量を表示するプログレスバーの実装方法を紹介しました。

スマホユーザーからのアクセスが多いサイトだと、特に役立つかと思います。

後どのくらいで読み終わるのかがひと目で分かるので、ページ滞在率アップも期待できそうですね。

サイトのテーマカラーに合わせて、自由にカスタマイズして使ってみてください!

よかったらシェアしてね!

コメント

コメントする

目次
閉じる