JavaScriptでスクロールバーを作ってみた。

jsscroll.png

Flickrから読み込んで表示するようにしたらめちゃくちゃコード量増えてしまった。このぐらいになってくるとprototypeとかjQueryとかライブラリを使う事も考えてみようかな。

ハンドルをつかんでスクロール、ボタンでのスクロールアップ／ダウン、ハンドル以外の場所をクリックで適当な位置にジャンプ、ができます。

var assets = new ReplaceScroll.Assets();
var replaceScroll = new ReplaceScroll("外枠の要素", "スクロール対象要素");
replaceScroll.initialize(assets.get());

というのが基本

初期状態のサンプル

カスタマイズもできるようにした

var assets = new ReplaceScroll.Assets();
assets.register({
  upArrowAsset  : "...", //REQUIRE
  baseBodyAsset : "...",
  baseBodyColor : "#...", //REQUIRE
  barTopAsset   : "...", //REQUIRE
  barBodyAsset  : "...",
  barBodyColor  : "#...", //REQUIRE
  barBottomAsset: "...", //REQUIRE
  downArrowAsset: "..." //REQUIRE
});
var replaceScroll = new ReplaceScroll("外枠の要素", "スクロール対象要素");
replaceScroll.initialize(assets.get());

対応関係は下の図のような感じ

ReplaceScrollBar.jpg

サンプル１

サンプル２

スクロールが極端に長くなったときのハンドル部分の対応とか、よく考えたら水平スクロールバーもあるし、まだまだ足りないなあ。

JavaScriptでのクラスっぽいものの書き方

これまでは

Class = function() {
  //...
}
Class.prototype.publicFunction = function() {
  //...
}

という書き方で頑張っていたんですが、prototypeプロパティを使った書き方だと内部変数が関数ごとに分断されてしまうので、いちいちthisキーワードをつかないといけなかったり、コードが煩雑になりがちです。

AS3を同時に勉強していたので同じような書き方がしたかったのですが、JavaScriptにはJavaScriptの特長があって、それを活かす書き方のほうがいいのかな、と最近は思っています。

Class = function() {
  var privateVar = hogehoge;
  var privateFunction = function() {
    //...
  }
  this.publicVar = fugafuga;
  this.publicFunction = function() {
    //...
  }
}

こっちの方が便利だよなー