Optiscroll

JavaScript

縦横に対応したカスタマイズ性に優れたモダンなスクロールバー「Optiscroll」

Optiscrollは、軽量で高度に最適化されたカスタマイズ性に優れたモダンなスクロールバーを実装できるJSライブラリです。9KBととっても軽いのがうれしいですね。縦横スクロールバーに対応しているほか、すべてのモダンブラウザ(IE9以上)をサポートしています。オプションもいろいろ用意されていたり、scrollToやscrollIntoViewといったアニメーションの設定も可能です。

カスタムイベントやAPIによるアニメーション

デモ

デモではシンプルなスクロールバーから、あらかじめスクロールバーを表示しているもの、縦横のスクロールバーを表示するものなど、いくつかの種類が用意されています。

scrollTo ( destX, destY [, duration] )、scrollIntoView (elem, [, duration, delta] )といったAPIを使用したアニメーションを設定することもできます。自分が指定した特定のポイントまでスクロールしてくれるので、コンテンツ内で特定の部分を効率よく見せたいときなんかに活用できそうですね。

カスタムイベントには、sizechange、scrollstart、scroll、scrollstop、scrollreachedgeなどが用意されているので、自サイトに合わせてカスタマイズしたい人にも最適です。

ほかにも、preventParentScroll、forceScrollbars、scrollStopDelay、maxTrackSize、minTrackSize……など、多彩なオプションが揃っています。

Optiscroll

関連記事

  1. GridTab

    JavaScript

    グリッドベースのレスポンシブなタブを実装できるjQueryプラグイン「GridTab」

    GridTabはグリッドベースによるレスポンシブに対応したタブを実装す…

  2. TypeIt

    JavaScript

    タイピングアニメーションを実装できる「TypeIt」

    TypeItはタイピングアニメーションを実装できるjQueryプラグイ…

  3. underline.js

    JavaScript

    遊び心あるアニメーションと美しさを追求したアンダーライン「underline.js」

    underline.jsはアニメーションが付いた美しいアンダーラインを…

  4. no-image

    JavaScript

    チェックボックスをアニメーショントグルにする「jquery-simpletoggler」

    jquery-simpletogglerは、デフォルトのチェックボック…

  5. no-image

    JavaScript

    シンプルでカスタマイズも簡単なパララックスエフェクト実装「parlx.js」

    parlx.jsはシンプルでカスタマイズも簡単なパララックスエフェクト…

最近の記事

  1. mill オイルヒーター
  2. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP