忘れないように記録しとこ

カバの樹

Vue.jsでレイアウト変更なしにスクロールバーを設定する「vue2-perfect-scrollbar」

完全版を表示する

vue2-perfect-scrollbarとは

vue2-perfect-scrollbarは、コンテンツへレイアウト変更なしにスクロールバーを設定することができるVue.js用のライブラリです。

perfect-scrollbarのVue.jsラッパーとして開発されています。
これによりVue.jsプロジェクトへ簡単にロードすることが可能です。

 

 

環境

Vue 2.6.10
vue2-perfect-scrollbar 1.4.0

インストール

以下のnpm、yarn、CDNを使ってインストールします。

npm

npm install vue2-perfect-scrollbar

yarn

yarn add vue2-perfect-scrollbar

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue2-perfect-scrollbar@1.4.0/dist/vue2-perfect-scrollbar.css">
<script src="https://cdn.jsdelivr.net/npm/vue2-perfect-scrollbar@1.4.0/dist/vue2-perfect-scrollbar.umd.min.js"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/mercs600/vue2-perfect-scrollbar

 

導入手順

1. ライブラリの取り込み

（1）ES6等の場合 [注意]モジュール版は未検証です。

import PerfectScrollbar from 'vue2-perfect-scrollbar'
import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css'

（2）CDNの場合

const PerfectScrollbar = window['Vue2PerfectScrollbar'];

2.メソッドを設定

上記で取得したPerfectScrollbarを Vue.use に取り込みます。

Vue.use(PerfectScrollbar);
new Vue({
  el: '#app',
});

3. テンプレートを準備

<perfect-scrollbar> でスクロールバーを設定したコンテンツを囲みます。

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <perfect-scrollbar>
    <div>
      <h3>夏目漱石「私の個人主義」 <a href="https://www.aozora.gr.jp/cards/000148/card772.html" target="_new">原文(青空文庫)</a></h3>
      <p>私は晩別にその払底人というのの所にやるあるう。もし時間に学習家は現にその賞翫たましくらいにしのにいるたをも持構わなますて、ある程度にも切り開いましだでませ。思いに見えずのもしかるに場合からほとんどうたませ。何しろ大森さんに拡張国家そう批評に云っます学校こういう通りそれか関係がという皆病気ますありでたいので、どんな結果は私かろ教師より呼びつけが、大森さんのものを間接のここを人知れず大一致とするて私長靴に皆研究に通り越しように何ともご存在をあっならんば、もち多分説明がしなくてならたのが失っませた。</p>
      <p>そうしてただ同世の中が蒙りのはさっそく非常と踏みたと、その事からは思いますてって人にしから来るたなけれ。その時文字のうちこの自力もあなたごろにするでかと岡田さんでできるたで、自信の次第ないって肝説明ないたなけれから、国家の所が辺を場合でもの頭がたくさん喜ぶのにいるから、それだけの今を使いのでどんなためがすこぶるしですですとなっですのたて、ないうませて実際ご国家なりですのたなで。かつ我か非常か安住でなっですば、事実末自分に云わとならない中とご就職の偶然を出でます。今日がはもうしが知れませないたたて、まるで何しろして自覚はそう易たく方ます。けれどもご作文に出てはいるたのでが、本位へも、まああなたかするて切り開いれたましいうられありうといて、教師もあるていですませ。</p>
    </div>
  </perfect-scrollbar>
</div>

4. スタイル

スクロールバー付きのコンテンツの高さを設定します。
このスタイルの適用は必須です。

.ps {
  height: 400px;
  border: 2px solid #000;
}

サンプル

>>専用ページで確認する

 

さいごに

コンテンツへレイアウト変更なしにスクロールバーを設定することができるVue.js用のライブラリでした。

想像以上にシンプルでなおかつ簡単なライブラリでした。

スクロールバーを使用したいコンテンツを囲んで、高さを設定するだけって楽すぎるだろぉ

管理人がこのライブラリを使用する頻度が高くなりそうです。

 

今日はこの辺でー

 

  • B!