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

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());

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

サンプル１

サンプル２

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

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()
    {
        //...
    }
}

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