今回は、JavaScriptを使って次のようなマウススクロールで表示されるプログレスバーについて紹介したいと思います。

スマートフォンでホームページを閲覧すると、どうしてもページが長くなりがちなので、こういったプログレスバーがあると、今どれぐらいまで読んでいるかっていうがわかって便利ですね。
また、ブログのような読み物もゴールがわかりやすくなってとても便利です。

コードはとてもシンプルなので、ぜひ利用してみましょう。

プログレスバーのソースコード

では早速行動について紹介していきます。
コードはJavascriptで可能ですが、よりコーディングしやすいようにjQueryを使います。

では、まずはHTMLでプログレスバーの要素を作りましょう。
非常にシンプルなdiv要素を1つ作って、ID振っておきます。

<div id="progress-bar"></div>

次にCSSですが、スクロール時に常時プログレスバーを見せておかないといけないので、
position:fixed;
を使って位置を固定します。
また、プログレスバーのサイズを指定します。高さは任意で、初期値は進捗0のため幅を0にしておきます。

#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 6px;
  background: #007BFF;
}

次にjavascriptの部分です。
スクロールによってプログレスバーが進む様子を作成します。

var progressBar = document.getElementById('progress-bar');

window.onscroll = function() {
  var totalHeight = document.body.scrollHeight - window.innerHeight;
  var progressHeight = (window.pageYOffset / totalHeight) * 100;
  progressBar.style.width = progressHeight + '%';
};

jQueryを使うと次のようになります

$(window).scroll(function() {
  var totalHeight = $(document).height() - $(window).height();
  var progressHeight = ($(window).scrollTop() / totalHeight) * 100;
  $('#progress-bar').width(progressHeight + '%');
});

現在地を、スクロールバーで表示しようとすると、全体に対して現在のスクロール位置がどれぐらいの場所にあるかというのを計算しなければいけません。
つまり、プログレスバーの長さを現在地として、

現在のスクロール位置 ÷スクロール可能な長さ

で計算します。

まずは「スクロール可能な長さ」を計算しましょう。
「スクロール可能な長さ」は、本来のページの長さからブラウザの表示領域の高さを引いた値になります。
「スクロール可能な長さ」はページ全体の長さのような気がしますが、ページを表示した状態でブラウザの表示部分の高さ分がすでに表示されているので、スクロールできるのはその他の表示されていない部分の長さになります。
そのため、ページ全体の長さからブラウザの表示領域の高さを引いた値が「スクロール可能な長さ」となります。

var totalHeight = $(document).height() - $(window).height();

現在のスクロール位置は変数が既に用意されているので、そのまま使いましょう。
と言うことで、全体におけるスクロールバーの進捗割合は次のように計算できます。

var progressHeight = ($(window).scrollTop() / totalHeight) * 100;

最後にプログレスバーの幅の値を、今計算した進捗の割合の数字を使って設定します。

$('#progress-bar').width(progressHeight + '%');

どうでしたか、コードは非常にシンプルで短かいですね。
こういったちょっとした工夫が、使いやすさを高めるので、ぜひ活用してみてください。

0

-

0