fleXcrollの使い方 fleXcroll

fleXcrollの使用方法をご紹介します。
fleXcrollはスクロールバーのデザインを独自にカスタマイズ可能にするオリジナルスクロールバーを付けるためのJavaScriptライブラリです。

公式サイト

デモ

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」にある「Download the script here」を押してダウンロードして解凍します。
解凍後、「fleXcroll_SampleStyles」内のscriptディレクトリを任意の場所に設置します。

JavaScriptの読み込み

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

HTML

適用方法

適用したいHTMLを用意します。

HTML

適用したい要素にクラス名flexcrollを追加するか、JavaScriptでfleXenv.fleXcrollMain(適用したい要素のID属性値);のように指定します。

クラス名を適用する場合:

HTML

JavaScriptで指定する場合:

JavaScript

CSS

スタイルシートを以下のような感じで設定します。
以下のソースでは、背景色を指定していますが、背景画像でも可能です。
スクロールバーにはborder指定が可能ですが、スクロールを適用した要素には、border指定ができませんのでご注意ください。

CSS

その他のCSS

その他、下記のようなスタイルシートが設定できます。
以下サンプルでは、上記CSS(背景色を背景画像として設定)に加えて設定しています。

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

CSS

スクロールバーの更新

updateScrollBars()メソッドを使うことでfleXcrollを適用した要素に対して中身を置き換えた際にスクロールバーを更新できます。

JavaScript

デモ

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

文字を追加