JavaScriptの.addEventListenerスクロールでプログレスバー

プログレスバー

プログレスバーは、「ユーザーが記事やコンテンツをどの辺りまで読んでいるのか?」が視覚的に分かるUIです。

そんなプログレスバーを、ネイティブのJavaScriptで作ってみました。

かかかず
かかかず

コード量もそんなに多くなく、簡単に実装可能なスニペットです。

.addEventListenerスクロール

JavaScriptの.addEventListener は、指定したイベントで発動するメソッドです。

かかかず
かかかず

.addEventListenerは、使い勝手が非常に良いのでよく使います。

この記事でのプログレスバーは、スクロールで発動する scroll を使用しています。

ページスクロールのプログレスバーのサンプル

この記事でも実装しているプログレスバーですが、パソコンで見てみると以下の動画のように、ページのスクロールに応じてページ最上部のプログレスバーが、左から右に伸びます。

かかかず
かかかず

縦に長いページに合いそうなプログレスバーです。

プログレスバーのコード

プログレスバーのHTMLは、設置したいページの好きなところに以下を記述するだけです。

<div class="progress-bar"></div>
かかかず
かかかず

body タグ内であればどこでもOKですが、HTMLの上部の方に設置した方が構文的にも正しい気がします。

JavaScriptの大枠で言えば、progressBar() のプログレスバー自体と、updateBar() のスクロールイベントでの挙動を指定していきます。

(function progressBar(){
  const bar = document.querySelector('.progress-bar');
  window.addEventListener('scroll', function updateBar(){
    const windowScroll = window.pageYOffset;
    const docHeight = document.body.clientHeight;
    const windowHeight = window.innerHeight;
   
    const scrollUnit = (windowScroll / (docHeight - windowHeight) * 100);
    bar.style.width = scrollUnit + "%";
  })
}());

特に、コードの4行目以降の高さの指定方法と計算方法については、表示域の高さを取得する.clientHeightと、ウィンドウ内部の高さを取得する .innerHeight の2種類。それに加えて、.pageYOffset のスクロール量を取得・計算してプログレスバーの長さを表示させています。

CSS

以下がCSSですが、設置するHTMLも少ないのでこれだけです。

  .progress-bar{
    width: 0%;
    height: 20px;
    background-color: #707070;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
  }

重なり順を指定する z-index のプロパティは、当サイトに合わせて200にしているので設置するページに応じて変更ください。