デザインスクロールをブロック要素に適用するJavaScript （jsScrolling）

ブロック要素など、コンテンツ上で長い文章やソースコードなど表示したい場合便利なのが、jsScrolling。ブラウザのスクロールデザインとは異なるオリジナルのスクロールバーを表示させることが出来る。

サイトのデザインに統一感を出したい場合に、コンテンツに配置したイメージをスクロールバーとして利用することも出来る。機能ごとにJavaScriptファイルが分かれているがサンプルを参考に作成すれば比較的楽に利用できる。

スクロールの操作
通常のスクロールバーと同様に、クリック操作でスクロールすることが出来る。マウスのホイールや、キーボード操作には対応していないが、jsScrollerTweenを利用して独自にキーボードイベントなどに対応することが可能。

実際に利用する際に、サンプルページ以外にもドキュメントが用意されているので細かなイベント処理などはそちらを参照していただきたい。

スクロールバーのデザインを変更すると、ユーザビリティが低下する可能性があるが、作成するデザインで十分にカバーできる。デザインが重要なコンテンツの場合利用する機会がありそうなので、是非試しておきたい。