JavaScript製のスクロールバーを作った

JAVASCRIPT

http://storehouse.sakura.ne.jp/scrollbar.html
もとネタはここ。
ライセンスと使い方がよく分かんないので自作。

<html>
  <head>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript">
ScrollBar = Class.create();
ScrollBar.prototype = {
  initialize: function(element) {
    this.bar = $(element);
    this.bar.height = parseInt(Element.getStyle(this.bar, 'height'));
    this.knob = this.bar.getElementsByTagName('div')[0];
    this.knob.height = parseInt(Element.getStyle(this.knob, 'height'));
    var move = null;

    Event.observe(this.knob, 'mousedown', function(event) {
      Event.stop(event)
      var top = parseInt(Element.getStyle(this.knob, 'top')) || 0;
      var start_y = Event.pointerY(event);

      move = function(move_event) {
        var offset_y = Event.pointerY(move_event) - start_y;
        var moved_top = top + offset_y;
        this.position(moved_top);
        if (this.onmousemove) { this.onmousemove(move_event, this); }
      }.bind(this);

      if (this.onmousedown) { this.onmousedown(event, this); }
      return false;
    }.bindAsEventListener(this), true);

    Event.observe(document, 'mousemove', function(event) {
      if (move) {
        Event.stop(event);
        move(event);
        return false;
      }
    }.bindAsEventListener(this), true);

    Event.observe(document, 'mouseup', function(event) {
      if (move) {
        Event.stop(event);
        move = null;
        if (this.onmouseup) { this.onmouseup(event, this); }
        return false;
      }
    }.bindAsEventListener(this), true);
  },

  position: function(top) {
    if (top) {
      if ((top + this.knob.height) > this.bar.height) {
        top = this.bar.height - this.knob.height;
      } else if (top < 0) {
        top = 0;
      }

      Element.setStyle(this.knob, { top:(top + 'px') });
    }

    return parseInt(Element.getStyle(this.knob, 'top'));
  }
}
    </script>
  </head>
  <body>
    <div id="my_scroll" style="width:10px; height:160px; background-color:#EEE;">
      <div style="position:relative; width:10px; height:30px; background-color:#CCC;">
      </div>
    </div>
    <div id="console">0</div>
    <script type="text/javascript">
      (function() {
        var scrollbar = new ScrollBar('my_scroll');
        scrollbar.onmousemove = function(e, self) {
          $('console').innerHTML = self.position();
        }
        scrollbar.onmousedown = function(e, self) {
          Element.setStyle(self.knob, { backgroundColor:'#BBB' });
        }
        scrollbar.onmouseup = function(e, self) {
          Element.setStyle(self.knob, { backgroundColor:'#CCC' });
        }
      })();
    </script>
  </body>
</html>