JS memo

お洒落にJavaScript。

2019年4月9日20:58

プログレスバーをネイティブJavaScript14行で実装してみた

メインビジュアル

プログレスバーをネイティブJavaScript14行で実装してみた

ブログなどやWebサイトの記事で今どこまで読んでる?を可視化するためのプログレスバーをネイティブJavaScriptで簡単に実装できたのでその方法をご紹介します。

目次
  1. プログレスバーの実装内容
  2. プログレスバーのコード
  3. jQueryでも書いてみた
  4. プログレスバーを実装できるライブラリー
  5. まとめ

プログレスバーの実装内容

サンプルをこの記事に設置してみました。(下のロケットが動いてるバーのことです。) デザインや細かい部分まで設定すればJavaScriptのコードが長くなってしまうので、今回はバー上をページのスクロール状況に応じてロケットが動くと言う必要最低限の仕組みだけで実装しました。

プログレスバーのコード

html、css、JavaScriptのコードをそれぞれみていきましょう。

htmlはプログレスバーを固定するdiv、プログレスバーのdiv、ロケットのimg要素を設置しています。

html

//プログレスバーの表示位置の固定
<div id="fix">
  // バーとロケット
  <div id="bar"><img id="rocket" src="rocket.png"></div>
</div>

cssはお好みでカスタマイズしてください。今回実装しているのはプログレスバーとロケットを画面下に固定したものです。

css

#fix {position: fixed;display: flex;align-items: center;width: 100%;height:50px;line-height: 50px;bottom:10px;left: 50%;transform: translateX(-50%);}
#bar {position: relative;width:80%;height:10px;margin:0 auto;background: #5555;border-radius: 10px}
#rocket {position:absolute;top:50%;left:-25px;transform: translate(0, -50%);color:#cc2200;}

JavaScriptではDOMが構築された時に記事の高さ、プログレスバーの長さ、ロケットの要素を取得しておきます。そしてスクロールされた時に記事の上部を0とした時の現在表示されている画面上部の高さを取得し、 記事の高さに対する現在の高さの割合を計算し、ロケットの位置を設定します。

JavaScript

window.addEventListener('DOMContentLoaded', ()=>{
  // 記事のhtml要素のid名を取得
  const article = document.getElementById("article");
  // 記事の長さ(高さ)を取得
  const ele_height = article.clientHeight;
  // プログレスバーの長さを取得
  const bar_width = document.getElementById("bar").clientWidth;
  // 動くロケットのidを取得
  const rocket = document.getElementById("rocket");
  // スクロールされた時
  window.addEventListener('scroll', ()=>{
    // 記事の上部の高さを0とした時の現在の高さを取得
    let ele_top = -article.getBoundingClientRect().top;
    // 記事内でスクロールしている時
    if(ele_top >= 0 && ele_top <= ele_height){
      // 記事の高さに対する現在の高さの割合に応じてロケットの位置を設定
      rocket.style.transform = "translate("+ ele_top / ele_height * bar_width + "px, -50%)";
    } else if( ele_top >= ele_height ){
      // ページ読み込み時に記事より下にいた場合のロケットの位置を設定
      rocket.style.transform = "translate(" + bar_width + "px, -50%)";
    }
  });
});

コメントタグを設置しているので一瞬長く見えますが14行で実装することができました。

jQueryでも書いてみた

ネイティブJavaScriptでも14行で実装できましたが、プログレスバーのコードをもっと簡潔にしたい!という方もいると思うので、jQueryでもサンプルも書いておきます。

$(document).ready(function(){
  // 記事のhtml要素のid名を取得
  const article = $("#article");
  // 記事の長さ(高さ)を取得
  const ele_height = article.outerHeight();
  // プログレスバーの長さを取得
  const bar_width = $("#bar").outerWidth();
  // 動くロケットのidを取得
  const rocket = $("#rocket");
  // ページ全体に対する要素が始まる高さ
  const ele_top = article.offset().top;
  // スクロールされた時
  $(window).scroll(function() {
    // 記事の上部の高さを0とした時の現在の高さを取得
    let now = $(window).scrollTop() - ele_top;
    // 記事内でスクロールしている時
    if(now >= 0 && now <= ele_height){
      // 記事の高さに対する現在の高さの割合に応じてロケットの位置を設定
      rocket.css({ transform:"translate("+ now / ele_height * bar_width + "px, -50%)"});
    } else if( now > ele_height ){
      // ページ読み込み時に記事より下にいた場合のロケットの位置を設定
      rocket.css({transform:"translate(" + bar_width + "px, -50%)"});
    }
  });
});

プログレスバーを実装できるライブラリー

手っ取り早く実装したい!と言う方は以下のライブラリーで簡単に実装できるので試してみてください。

progressbar.js / jQuery UI/ pace.js

まとめ

ちょっとした遊び心でプログレスバーを作成してみたら意外と簡単に実装できました。もっと動きを滑らかにしたり、デザインもカスタマイズできるので色々作ってみてください。