# スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について

長いコンテンツをスクロールバーつきで overflow 表示しようと思ってフロント作っていましたが、ブラウザーデフォルトについてあるスクロールバーが見にくくて、何とかしたいと思って調べてみたところ、vue-perfect-scrollbar というものがありました。
vue-perfect-scrollbar は スクロールバーをきれいに表現してくれるスクロールバーのプラグインです。 vuejs 用にperfect-scrollbar (opens new window)を再パッケージング化したもので MIT フリーライセンスのライブラリです。作者lecion (opens new window)は国籍公開していませんが、Github に公開している他のレポジトリから見るとアジア系の人だと推定しています。npm vue-perfect-scrollbar ページ (opens new window)からのデータですが、週間 18000 以上のダウンロードされている人気ライブラリのようです。

# 使い方

vuejs 側で使える perfect-scrollbar なので、vue-perfect-scrollbar よりも perfect-scrollbar のドキュメント読んだほうがいいかもしれません。

# install

npm install vue-perfect-scrollbar

# 使い方の例

<template>
  <VuePerfectScrollbar
    class="scroll-area"
    v-once
    :settings="settings"
    @ps-scroll-y="scrollHandle"
  >
    <img src="./assets/azusa.jpg" height="720" width="1280" alt="" />
  </VuePerfectScrollbar>
</template>

<script>
import VuePerfectScrollbar from "vue-perfect-scrollbar";

export default {
  components: {
    VuePerfectScrollbar,
  },
  name: "app",
  data() {
    return {
      settings: {
        maxScrollbarLength: 60,
      },
    };
  },
  methods: {
    scrollHandle(evt) {
      console.log(evt);
    },
  },
};
</script>

# Options Props

# handlers {String[]}

スクロール element のハンドラーリスト

デフォルト：

• click-rail
• drag-thumb
• keyboard
• wheel
• touch

# wheelSpeed {Number}

スクロール速度を変更したい時にこれを使うマウスホイールイベントです。契約書など長～い文書を表示する時に重宝されます。

デフォルト：1

# wheelPropagation {Boolean}

スクロールバーが最後に達した時に、mousewheel イベントで親要素に発火します$emit。契約書の最後までスクロールするとボタン表示変更する時に使えます。

デフォルト：true

# swipeEasing {Boolean}

スワイプスクロールがイーズ化して緩やかになります。これ使うとスクロールがより美しく表現できます。

デフォルト：true

# minScrollbarLength {Number？}

整数値の設定になりますが、英語通り最小のスクロールバーの長さ的な設定で、指定したスクロールバーのピクセル数以下に縮小しません。

デフォルト：null

# maxScrollbarLength {Number？}

minScrollbarLength の逆で、指定したスクロールバーのピクセル数以上に拡大しません。

デフォルト：null

# scrollingThreshold {Number}

ps--scrolling-x と ps--scrolling-y クラスのしきい値設定できます。単位はミリ秒です。

デフォルト：1000

# useBothWheelAxes {Boolean}

よくわからなかったけど、翻訳するとこんな感じ

1 つの（垂直または水平）スクロールバーのみが表示される場合、垂直および水平スクロールの両方がスクロールバーに影響します。

デフォルト：false

# suppressScrollX {Boolean}

trueにすると、コンテンツの幅に関係なく、X 軸のスクロールバーは使用できなくなります。

デフォルト：false

# suppressScrollY {Boolean}

suppressScrollX の Y 軸バージョン trueにすると、コンテンツの高さに関係なく、Y 軸のスクロールバーは使用できなくなります。

デフォルト：false

# scrollXMarginOffset {Number}

X 軸のスクロールバーを有効にしなくても、コンテンツの幅がコンテナーの幅を超えることができるピクセル数。
X 軸のスクロールバー MarginOffset 値を設定

デフォルト：0

# scrollYMarginOffset {Number}

Y 軸のスクロールバー MarginOffset 値を設定

デフォルト：0

# Events

• ps-scroll-y
  y 軸がいずれかの方向にスクロールされると発火します。

• ps-scroll-x
  x 軸がいずれかの方向にスクロールされると発火します。

• ps-scroll-up
  上にスクロールするときに発火します。

• ps-scroll-down
  下にスクロールするときに発火します。

• ps-scroll-left
  左にスクロールすると発火します。

• ps-scroll-right
  右にスクロールするときに発火します。

• ps-y-reach-start
  スクロールが y 軸の開始点に達すると発火します。

• ps-y-reach-end
  スクロールが y 軸の終わりに達すると発火します（無限スクロールに便利です）。

• ps-x-reach-start
  スクロールが x 軸の開始点に達すると発火します。

• ps-x-reach-end
  スクロールが x 軸の最後に達すると発火します。

reach プロパティを使用してリーチ状態を監視することもできます。