fleXcroll

fleXcrollは、クロスブラウザ対応、ウェブ標準準拠のカスタムスクロールバースクリプト。以下はfleXcrollの和訳かつ要約。

導入

fleXcrollは、OS標準のスクロールバー同様に、マウスホイール、キーボードスクロールをサポートし、テキスト選択も可能。overflow: autoを設定したdivのiPhoneタッチスクロールもサポート。

サンプル

fleXcrollを動的に設定してどのように使うかを、このHTMLで見てください。fleXcrollはAjaxのような動的なコンテンツ追加に対応しており、外部からコントロール可能。アンカーID、要素の追加、削除、幅の切り替え、相対的なスクロール、絶対的な位置指定のスクロールが可能。

基本的な使い方

セットアップ

head要素内でflexcroll.jsを読み込む。
カスタムスクロールバーに関するスタイルをCSSに書く。fleXcrollは正しいCSSが書かれていないと機能しない。最低限必要なものは後述。
fleXcrollはdiv要素でしか機能しない。
そのdivはoverflow: autoにする必要がある。
height: autoは現在はサポートしていない。パーセント指定のheightはいくつかのブラウザで正常に機能しない。

divにfleXcrollを適用する

ページ読み込み時に適用

divにflexcrollクラスを設定する。

<div class="flexcroll">

より高速な適用：ページに画像が多いと、fleXcrollは初期化に時間がかかる。もしDomContentLoadedの為にJSライブラリを使っていなければ、高速な開始の為に次のようにできる。
</body>の直前にコード追加

<div id='flexcroll-init'></div>
</body>

手動で適用する

idを使って

fleXenv.fleXcrollMain("your-div-id");

JavaScript要素を使って

fleXenv.fleXcrollMain(yourDivElement);

classを使って

fleXenv.initByClass("a-class-name-of-your-choice");

スクロールバーのスタイルを定義する

自動的に生成されるスクロールバー（推奨）

fleXcrollは必要なdiv要素を生成するので、あなたはこれらのスタイルを指定するだけ。スタイル指定の為に、fleXcrollは生成したdivにクラス属性を設定する。

.vscrollerbase : 縦スクロールのトラックとして使われ、縦スクロールバーを収容する
.vscrollerbasebeg : ユーザーが指定しない場合、高さはbaseに合わせて自動調整される
.vscrollerbaseend : 高さはユーザーが指定する必要がある
.vscrollerbar : 縦のスクロールバーとして使われる。ユーザーが指定しない場合、高さはコンテンツの高さが自動反映される。
.vscrollerbarbeg : ユーザーが指定しない場合、高さはbarに合わせて自動調整される
.vscrollerbarend : 高さはユーザーが指定する必要がある
.hscrollerbase : 横スクロールのトラックとして使われ、横スクロールバーを収容する
.hscrollerbasebeg
.hscrollerbaseend
.hscrollerbar
.hscrollerbarbeg
.hscrollerbarend
.scrollerjogbox : 縦横両方のスクロールバーが存在する場合のみ追加される。右下部分。

※訳者注：上記では全然設定が足りない。以下のサンプルをペーストしてカスタマイズするといい。

.scrollgeneric {
	position: absolute;
	top: 0;
	left: 0;
	line-height: 1px;
	font-size: 1px;
}

.vscrollerbar {
	width: 10px;
	background: #FFF;
}
.vscrollerbarbeg {
	width: 10px;
	height: 24px !important;
	background: #000;
}
.vscrollerbarend {
	width: 10px;
	height: 24px;
	background: #000;
}
.vscrollerbase {
	width: 10px;
	background: #99F;
}
.vscrollerbasebeg {
	width: 10px;
	height: 15px !important;
	background: #F00;
}
.vscrollerbaseend {
	width: 10px;
	height: 15px;
	background:#9FF;
}

.hscrollerbase {
	height: 16px;
	background-color: white;
}
.hscrollerbar {
	height: 16px;
	background-color: black;
}

.vscrollerbar,
.hscrollerbar {
	padding: 0px;
	z-index: 2;
}

.scrollerjogbox {
	width: 36px;
	height: 16px;
	top: auto;
	left: auto;
	bottom: 0px;
	right: 0px;
	background: #37917A;
}

外部のスクロールバー

バージョン2.0から、HTML要素で構成されるスクロールバーをサポートしている。詳細は後述。

CSSトリック

固定サイズのスクロールバー

縦スクロールバーの高さを固定

.vscrollerbase { 
height: 100px !important; 
}

横スクロールバーの幅を固定

.hscrollerbase { 
width: 100px !important!; 
}

常にscrollbase（スクロールトラック）を表示する

.vscrollerbase { 
visibility: visible !important; 
}

.hscrollerbase { 
visibility: visible !important; 
}

縦スクロールバーを左に表示する

.vscrollerbase { 
.vscrollerbase {left: 0 !important;}
}

※上記はコピペミスではなくドキュメントのまま

fleXcrollと印刷

下記を追加すると印刷可能になる。

@media print { 
div { 
height: auto!important; width: auto!important; 
position: static!important; margin: 0!important; padding: 0!important 
} 
.scrollgeneric {display: none;} 
}

fleXcollのコンテンツだけを印刷可能にしたいなら、

@media print { 
.flexcrollactive, .flexcrollactive div  { 
height: auto!important; width: auto!important; 
position: static!important; margin: 0!important; padding: 0!important 
} 
.scrollgeneric {display: none;} 
}

fleXcrollとFlash

※省略

fleXcrollを使ったプログラミング

※省略

追加事項

正しく動作させる

※省略

料金：非商用利用は無料

非商用利用は無料で、hesido.comにリンクしてくれるとありがたいが強制ではない。

商用利用は単一サイトなら$30(USD), 2つ目のサイトは$25, さらに$15で無制限。後でアップグレードも可能。例えばすでに1サイト分を払っていれば、＋$40で無制限にできる。

It covers your back when it can't work!

Degrading is the most important feature of the script, it degrades excellently without breaking anything if the user has turned off javascript, or when the User Agent has no javascript support. Why not try this page with Javascript turned off? You'll see the content in the srollable elements are still accessible.

使用例

※省略。「基本的な使い方」と大差ない。

バーのスタイル指定

※省略

重要事項

動作するブラウザ

iOS上のSafari、Opera 8.5以降、Firefox 1.5以降（いずれもPC、Mac、Linux）、Webkit（Mac）、IE 5以降はテスト済み。

Mac Safari 2.0.4には最新のWebkitで修正済みのバグがある。最新のWebkitを入れれば問題なく使える。

アクセシブルで使いやすいサイトの為に

スクロールバーとして見分けやすいデザインを。
クリック、ドラッグしやすい大きさに。
コンテンツ自体よりも、見た目が重要な場合だけ使用するように。

一般的な意見

※省略

標準モード

標準モードでは、全てのメジャーブラウザで全く同様に描画される。

互換モード及びIE5

※省略

fleXcrollのライセンス購入方法

コンタクトのページからメールしてくれれば情報を送るが、PayPal等を使ってより早く行う事もできる。

PayPalを使う

emrahbaskaya at hesido dot com 宛に、以下の情報を添えて送金する。

ライセンスのタイプ
ライセンスに登録する名前（個人名または法人名）　サイトオーナーで無くても良く、通常ウェブ開発者
サイトのベースURL（無制限ライセンスの場合は不要）
ライセンスを送るE-mail

PayPalを使わない

※省略

ライセンステキストを受け取ったら

届かなかったら連絡を。再送する
パブリックライセンステキストを購入したライセンステキストに置き換える
プロセスが良く分からなければ、コンタクトページから連絡を。

ライセンスを購入したら、同じライセンスタイプの分はバージョンアップしても使える。価格変更の影響も受けない。もし非商用サイトで使用していても、気にいったらライセンス購入でサポートできる。

導入