jScrollPaneの使い方 jScrollPane

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

公式サイト

  • ※ このライブラリは、jQueryが別途必要です。
目次
  1. デモ
  2. ダウンロードと設置
  3. JavaScriptの読み込み
  4. 適用方法
  5. スクロールバーのスタイル
  6. オプション

デモ

次のデモは、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ファイルです。

JavaScriptの読み込み

任意の場所に設置したjQueryとjQuery Cycle PluginのJavaScriptファイルを読み込みます。
パスは環境に応じて変更してください。

HTML

適用方法

HTMLを用意します。

HTML

div.inner要素のように1つ余分に何かで囲うようにしないと、スクロールが適用されませんのでご注意ください。

$(セレクター).jScrollPane();のようにJavaScriptのコードを書きます。
この時点で先ほどのHTMLに対してスクロールバーが適用されます。

JavaScript

スクロールバーのスタイル

次のクラスが割り当てられていますので、適宜スタイルを当てます。

CSS

オプション

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

JavaScript

プロパティ 初期値 設定可能値 説明
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 = 不明 		横スクロールの矢印の場所。