fleXcroll | Webサイト制作支援

デモ

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

/* スクロール範囲（上下、左右のスクロールボタンを設置した場合に使用） */
								.vscrollerbar,
								.hscrollerbar {
									z-index:2;
									padding:10px;
								}

/* 縦スクロール 上スクロールボタン */
								.vscrollerbasebeg {
									width:10px;
									height:10px !important;
									background:url("img/scroll_topbtn.gif") no-repeat;
								}

/* 縦スクロール 下スクロールボタン */
								.vscrollerbaseend {
									width:10px;
									height:10px !important;
									background:url("img/scroll_downbtn.gif") no-repeat;
								}

/* 縦スクロールバー 先端 */
								.vscrollerbarbeg {
									width:10px;
									height:5px !important;
									background: url("img/scroll_y_top.gif") no-repeat;
								}

/* 縦スクロールバー 終端 */
								.vscrollerbarend {
									width:10px;
									height:5px !important;
									background:url("img/scroll_y_down.gif") no-repeat;
								}

/* 横スクロール 左スクロールボタン */
								.hscrollerbasebeg {
									width:10px !important;
									height:10px;
									background:url("img/scroll_leftbtn.gif") no-repeat;
								}

/* 横スクロール 右スクロールボタン */
								.hscrollerbaseend {
									width:10px !important;
									height:10px;
									background:url("img/scroll_rightbtn.gif") no-repeat;
								}

/* 縦スクロールバー 先端 */
								.hscrollerbarbeg {
									width:5px !important;
									height:10px;
									background:url("img/scroll_x_left.gif") no-repeat;
								}

/* 縦スクロールバー 終端 */
								.hscrollerbarend {
									width:5px !important;
									height:10px;
									background:url("img/scroll_x_right.gif") no-repeat;
								}

スクロールバーの更新

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

文字を追加

fleXcrollの使い方 fleXcroll

デモ

ダウンロードと設置

JavaScriptの読み込み

適用方法

CSS

その他のCSS

スクロールバーの更新

デモ