先日仕事で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の仕様ってなんでこうも酷いんですかね。。
てことで、今回はここまで！また！
