CSSデザインできるスクロールバー表示JavaScript （fleXcroll）

通常のスクロールバーデザインはブラウザやOS環境に依存するため、コンテンツデザインに合わない場合があります。コンテンツ内に表示するスクロールバーをCSSでデザインできるようにしてくれるのが、fleXcroll。

ダウンロードサンプルに含まれるデザインスクロールバーは2種類となっている。あまり良いデザインではないので、自身で作成するのが良いだろう。デザイン用のイメージ素材とスタイルシートを作成すれば、オリジナルのデザインで利用できる。

利用と設置方法
スクロールバー用のCSSデザインが出来上がったら、flexcroll.jsと共にHTMLヘッダでインクルードしておけば良い。スクロールバーを割り当てるコンテンツ要素にはclass="flexcroll"を指定する。

コンテンツ量に合わせて変化する
表示するコンテンツの量に応じて、スクロールバーのグリップ部分のサイズが変化する。通常のスクロールバー同様の表示とクリックイベントに対応する。また、コンテンツ内のマウスホイール操作も対応している。

スクロール操作は問題なく利用でき、通常のものと変わらないレベルになっている。CSSのみでデザインできるので、HTMLコード簡単に修正する程度で導入することが可能。ジョグボックスでのスクロール機能もあり縦横両方のスクロールを表示する設定の際にアクティブになる。