#スクロールバー自由にカスタマイズできる 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 のドキュメント読んだほうがいいかもしれません。

Demo(opens new window)

#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-xps--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 プロパティを使用してリーチ状態を監視することもできます。

2020-02-10
  • vuejs

関連記事

polyfill という宝物で開発時の ie11 対応した時のメモ
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
値段をカンマと円マーク表示 vuejs money-format filter 自作
vue hook 使って vuejs コンポーネントライフサイクル監視
vuejs i18n の html-lang と font 設定
vuejs スクロールでナビバー表示非表示
nuxtjs vue router params query ルートから取得できるもの
vuejs 開発時に遭遇したエラーリスト
nuxt cordova web ハイブリッドアプリ作成した時のメモ
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
vuejs で omisejapan の決済フォーム作成した時のメモ
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
laravel vuejs 初期設定