Vue.js環境でスクロールバーのデザインを変更する（perfect-scrollbar）

Vue.jsで構築したサイトに対して、下記のサイトを参考にしperfect-scrollbarの導入を行った。

Vue.jsで「vue2-perfect-scrollbar」を使ってカスタムスクロールバーを実装する
https://nori-life.com/vue-js-perfect-scroll-bar/
——————————
◆プラグインインストール

yarn add vue2-perfect-scrollbar

◆.vueファイル内でインポート＆コンポーネント登録を行う

import { PerfectScrollbar } from 'vue2-perfect-scrollbar'

components: {
  PerfectScrollbar
}

◆cssの読み込み

<style src="vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css"/>

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

<perfect-scrollbar>
  <p>この要素がスクロールします。この要素がスクロールします。この要素がスクロールします。この要素がスクロールします。この要素がスクロールします。この要素がスクロールします。</p>
</perfect-scrollbar>

参考サイト

84LIFE

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

https://nori-life.com/vue-js-perfect-scroll-bar/