プログレスバーは、「ユーザーが記事やコンテンツをどの辺りまで読んでいるのか？」が視覚的に分かる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にしているので設置するページに応じて変更ください。
