jScrollPaneの使い方 jScrollPane

jScrollPaneの使用方法をご紹介しています。
jScrollPaneはCSSでデザイン可能なオリジナルスクロールバーのJavaScriptライブラリです。

公式サイト

サンプル

以下サンプルは、CSSでbackground-colorとpadding、borderを指定しています。
スクロールはデフォルトのものです。

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

ダウンロードと設置

こちらの「Download.zip」をクリックしてダウンロードして解凍します。
基本的に必要なものは「script」ディレクトリ内の「jquery.jscrollpane.min.js」と「style」ディレクトリ内にある「jquery.jscrollpane.css」の2ファイルです。

また、jQueryが別途必要ですので、jQueryが設置されていない場合は、こちらからダウンロードして任意の場所に設置してください。

JavaScriptの読み込みと設定

以下を<head>内に記載します。
パスは環境により変更してください。

適用方法

注意:以下のp要素のように必ず何かで囲うようにしないとスクロールが適用されませんのでご注意ください。

CSS

細かく指定ができるというわけではないようですが、以下のclassが割り当てられています。

オプション

下記のオプションが用意されていますので、一部ご紹介します。
その他のオプションについてはこちらをご覧ください。
オプションの設定方法は以下を参照してください。

プロパティ 初期値 設定可能値 説明
showArrows false true, false 矢印ボタンの有無。
arrowScrollOnHover false true, false 矢印ボタンでマウスオーバー時の自動スクロールの有無。
arrowButtonSpeed 0 数値 矢印ボタンでのスクロール時の速さ。
verticalGutter 0 数値 縦スクロールからコンテンツまでの余白。
horizontalGutter 0 数値 横スクロールからコンテンツまでの余白。
verticalArrowPositions split after = 右
before = 左
os = 左右
split = 不明
縦スクロールの矢印の場所。
horizontalArrowPositions split after = 右
before = 左
os = 左右
split = 不明
横スクロールの矢印の場所。