Vue.jsで「vue2-perfect-scrollbar」を使ってカスタムスクロールバーを実装する

 先日仕事でvue.jsの環境でカスタムスクロールバーを実装する必要があり、スクラッチで組もうかなとも考えたのですが、あまり時間もなかったのでいろいろ探したら、カスタムスクロールバーを簡単に実装できることで有名な「PerfectScrollBar」をvue.js用にラッピングしてくれているライブラリ「vue2-perfect-scrollbar」があったので、今回はその使い方を紹介したいと思います。

環境

 なお、今回のバージョン等の環境は以下の通りとなります。

今回の環境

  • Webpack環境(v4.29.6)
  • vue v2.9.6
  • Node.js v10.12.0

カスタムスクロールバーとは?

 そもそも、一般的に言われるカスタムスクロールバーとは簡単に言うと、ブラウザのデフォルトのスクロールバーではなく様々なブラウザでも同様の機能、デザインを実現するスクロールバーになります。つまり環境に依存しないスクロールバーです。

 スクロールバーは、今ではcssのみで見た目をカスタマイズできるブラウザもありますが、ブラウザ環境によって扱いがまちまちでChromeやSafariなどのWebkitベースのブラウザとIEやEdgeのマイクロソフト製のブラウザでは見た目のデザインや幅などの扱いが大きな異なってきます。そういった違いがあまり影響しないようなコンテンツだと問題はないのですが、cssのOverflowプロパティを使って要素単体にスクロールバーを実装するようなケースだといろいろと問題になることがあります。そういった問題を解決するためにjavascriptとcssを使って独自のスクロールバーを作っていくわけですね。

PerfectScrollBarとは?

 そんなカスタムスクロールバーですが、これをスクラッチで組もうとなると結構厄介だったりします。要素の座標やスクロールの位置を取得して、その差分からどうのこうのという処理を書かないといけないわけです。制作時間に余裕があればそれでもいいのですが、クライアント案件ともなると中々余裕がないのが実情ですね。

 そこで使用するのがプラグイン等のライブラリなのですが、今回はタイトルや冒頭でも紹介している通りこちらの「vue2-perfect-scrollbar」というライブラリを使ってみたいと思います。ちなみにPerfectScrollBarとはjQueryの世界では有名なプラグインですごく簡単に実装できcssで自由自在に見た目の調整もできるカスタムスクロールバーの代名詞のようなプラグインですね。

vue2-perfect-scrollbar実装方法

インストール

 てことで、早速インストールしていきます。インストールには「npm」と「yarn」の二通りの方法あります。

 これは自身の環境に合わせて好きな方でインストールしてください。

 インストールが完了すると、Webpack環境の場合「package.json」のdependenciesに「”vue2-perfect-scrollbar”: “^1.2.0″」のような記述が追記されると思います。

 インストールが問題なく完了したら実装していくのですが実装方法もいたって簡単です。

vue2-perfect-scrollbarをimport

 順番としては、まずインストールした「vue2-perfect-scrollbar」をimportします。

cssの読み込み

 続いて、cssも読み込みます。

コンポーネント登録

 次に、コンポーネント登録します。

対象要素を「perfect-scrollbar」コンポーネントで囲む

 スクロールさせたい要素を下記のように「perfect-scrollbar」コンポーネントで囲みます。

 これだけですね。あとはスタイルシートで自分の好みに合うように調整して完成です。

サンプル

 簡単なサンプルコード。

上のサンプルコードを実装したデモがこちら。

まとめ

 ということで、今回はVue.js環境でカスタムスクロールバーを簡単に実装できる「vue2-perfect-scrollbar」の使い方を紹介しました。

 まだcssのみで全てのブラウザで統一されたスクロールバーの実装はなかなか難しいので、こういったプラグンインを活用していくと作業効率も上がりますね。というかIEとかEdgeの仕様ってなんでこうも酷いんですかね。。

 てことで、今回はここまで!また!

お仕事のご相談・ご依頼
お気軽にお問い合わせください!

お仕事の依頼はこちら

著者プロフィール

Takanori Hashi

東京、奄美大島、宮崎の拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。いろいろな人の話しを聞くのが好きなので、このブログを通して多くの人と繋がりが出来たら嬉しいです。noteとInstagramもやっているのでフォローしてくれたらありがたいです!

人気記事