Vue.jsでページのスクロールにプログレスバーを設置する「vue-scroll-progress」

vue-scroll-progressとは

vue-scroll-progressは、ページのスクロールに合わせてプログレスバーを表示してくれるコンポーネントライブラリです。

CDNのUMDファイルが存在しません。
代わりにブラウザのコンパイラが用意されており、そこからダウンロードすることが可能です。

【動画サイズ：62KB】

環境

インストール

以下のnpm、yarn、UDNを使ってインストールします。

npm

npm i vue-scroll-progress --save

yarn

yarn add vue-scroll-progress

UMD

CDNが存在しないので下記のUMDを使用する

// ブラウザコンパイラ
// https://bundle.run/vue-scroll-progress
<script>
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).vueScrollProgress=t()}(this,function(){"use strict";var e={install:function(e,t){e.mixin({mounted:function(){var e,t,n,o,d;function l(){d=document.documentElement.scrollHeight-document.documentElement.clientHeight}(e=document.createElement("div")).id="progress-container-el",e.style.position="fixed",e.style.width="100%",e.style.height="4px",e.style.backgroundColor="transparent",e.style.left=0,e.style.right=0,e.style.top=0,e.style.zIndex=99999,(t=document.createElement("div")).id="progress-el",t.style.width="0px",t.style.height="4px",t.style.backgroundColor="#42b883",n=0,o=0;document.body.addEventListener("resize",((e,t,n)=>{var o;return()=>{const d=this,l=arguments,i=n&&!o;clearTimeout(o),o=setTimeout(function(){o=null,n||e.apply(d,l)},t),i&&e.apply(d,l)}})(()=>{l()},200,!1),!1),l(),window.addEventListener("scroll",()=>{n=document.body.scrollTop||document.documentElement.scrollTop,o=n/d*100,t.style.width=o+"%"}),document.getElementById("progress-container-el")||(e.appendChild(t),document.body.appendChild(e))}})}};return"undefined"!=typeof window&&window.Vue&&(window.VueScrollProgress=e),e});
</script>

gitリポジトリは以下から取得できます。

https://github.com/spemer/vue-scroll-progress

導入手順

1. ライブラリの取り込み

（1）ES6等の場合 [注意]モジュール版は未検証です。

import VueScrollProgress from 'vue-scroll-progress'

（2）CDNの場合

const VueScrollProgress = window['VueScrollProgress'];

2.メソッドを設定

上記で取得したVueScrollProgressを Vue.use に取り込みます。

Vue.use(VueScrollProgress);
new Vue({
  el: '#app', 
});
 

3. テンプレートを準備

高さ150pxの要素を10個ほど用意します。

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <div v-for="n in 10" style="height: 150px;"></div>
</div>

サンプル

>>専用ページで確認する

さいごに

ページのスクロールに合わせてプログレスバーを表示してくれるコンポーネントライブラリでした。

今日はこの辺でー