fleXcrollの使い方 fleXcroll

fleXcrollの使用方法をご紹介しています。
fleXcrollはCSSでデザイン可能なオリジナルスクロールバーを付けるための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の読み込み

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

適用方法

指定要素にclass="flexcroll"を追加します。

CSS

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

その他の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

スクロールバーの更新

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

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

文字を追加