[jQuery] OSX風のスクロールバーにするプラグイン！

trackpad-scroll-emulator

trackpad-scroll-emulatorは、jQueryのプラグインで、OSX風のスクロールバーにすることができます。

導入方法

まずは、いつものように必要ファイルの読み込みです。

<link rel="stylesheet" href="css/trackpad-scroll-emulator.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.trackpad-scroll-emulator-1.0.min.js"></script>

そしてHTMLのマークアップですが、縦方向の時と横方向の時で若干違います。
といっても、クラスが違うだけです。

まずは、縦方向

<div class="tse-scrollable demo1">
  <div class="tse-content">
    My content
  </div>
</div>

そして、横方向

<div class="tse-scrollable demo2 horizontal">
  <div class="tse-content">
    My content
  </div>
</div>

こうなります。horizontalが増えました。

そして、実行文です。

<script>
  $(document).ready(function() {
    $('.demo1').TrackpadScrollEmulator();
  });
</script>

これで完成です。

ダウンロードは下記から。

https://github.com/jnicol/trackpad-scroll-emulator

まとめ

ちょっとおしゃれにしたい時などには最適なプラグインです。
それほど難しくないので、是非導入してみてください。