JavaScript自定义滚动条

function createScroll() {
    this.doc = document;
    this._wheelData = -1;
    this.init.apply(this, arguments);
 }

init: function(mainBox, contentBox, className) {
      var mainBox    = this.doc.getElementById(mainBox);
      var contentBox = this.doc.getElementById(contentBox);
      var scrollDiv  = this._createScroll(mainBox, className);
      this._resizeScorll(scrollDiv, mainBox, contentBox);
      this._tragScroll(scrollDiv, mainBox, contentBox);
      this._wheelChange(scrollDiv, mainBox, contentBox);
      this._clickScroll(scrollDiv, mainBox, contentBox);
  },

_createScroll: function(mainBox, className) {
    var _scrollBox = this.doc.createElement('div')
    var _scroll    = this.doc.createElement('div');
    var span       = this.doc.createElement('span');
    _scrollBox.appendChild(_scroll);
    _scrollBox.className = 'scroll';
    _scroll.appendChild(span);
    _scroll.className = className;
    mainBox.appendChild(_scrollBox);
    return _scroll;
 },

_resizeScorll: function(element, mainBox, contentBox) {
   var eleNode        = element.parentNode;
   var conHeight      = contentBox.offsetHeight;
   var _width         = mainBox.clientWidth;
   var _height        = mainBox.clientHeight;
   var _scrollWidth   = element.offsetWidth;
   var _left          = _width - _scrollWidth;
   eleNode.style.width      = _scrollWidth + "px";
   eleNode.style.height     = _height + "px";
   eleNode.style.left       = _left + "px";
   eleNode.style.position   = "absolute";
   eleNode.style.background = "#ccc";
   contentBox.style.width = (mainBox.offsetWidth - _scrollWidth + 10) + "px";
   var _scrollHeight = parseInt(_height * (_height / conHeight));
   if (_scrollHeight >= mainBox.clientHeight) {
       element.parentNode.style.display = "none";
   }
   element.style.height = _scrollHeight + "px";
},

_tragScroll: function(element, mainBox, contentBox) {
           var mainHeight = mainBox.clientHeight;
           element.onmousedown = function(event) {
           var _this      = this;
           var _scrollTop = element.offsetTop;
           var e          = event || window.event;
           var top        = e.clientY;
          //this.onmousemove=scrollGo;
          document.onmousemove = scrollGo;
          document.onmouseup  = function(event) {
             this.onmousemove = null;
          }
     function scrollGo(event) {
          var e    = event || window.event;
          var _top = e.clientY;
          var _t   = _top - top + _scrollTop;
          if (_t > (mainHeight - element.offsetHeight)) {
               _t = mainHeight - element.offsetHeight;
          }
          if (_t <= 0) {
              _t = 0;
          }
          element.style.top    = _t + "px";
            contentBox.style.top = -_t * (contentBox.offsetHeight / mainBox.offsetHeight) + "px";
            this._wheelData = _t;
         }
    }
    element.onmouseover = function() {
        this.style.background = "#1b4f63";
    }
    element.onmouseout = function() {
        this.style.background = "#2c8cab";
    }
},

_wheelChange: function(element, mainBox, contentBox) {
       var node = typeof mainBox == "string" ? $(mainBox) : mainBox;
       var flag = 0,
       rate = 0,
       wheelFlag = 0;
       if (node) {
            this._mouseWheel(node, function(data) {
            wheelFlag += data;
            if (this._wheelData >= 0) {
                 flag              = this._wheelData;
                 element.style.top = flag + "px";
                 wheelFlag         = this._wheelData * 12;
                 this._wheelData        = -1;
            } else {
                 flag = wheelFlag / 12;
            }
            if (flag <= 0) {
                 flag      = 0;
                 wheelFlag = 0;
            }
            if (flag >= (mainBox.offsetHeight - element.offsetHeight)) {
                flag      = (mainBox.clientHeight - element.offsetHeight);
                wheelFlag = (mainBox.clientHeight - element.offsetHeight) * 12;
            }
            element.style.top    = flag+ "px";
            contentBox.style.top = -flag * (contentBox.offsetHeight / mainBox.offsetHeight) + "px";         
        });
    }
},

_clickScroll: function(element, mainBox, contentBox) {
           var eleNode = element.parentNode;
           eleNode.onclick = function(event) {
           var e = event || window.event;
           var t = e.target || e.srcElement;
           var sTop = document.documentElement.scrollTop > 0 ? document.documentElement.scrollTop : document.body.scrollTop;
           var top  = mainBox.offsetTop;
           var _top = e.clientY + sTop - top - element.offsetHeight / 2;
           if (_top <= 0) {
               _top = 0;
          }
          if (_top >= (mainBox.clientHeight - element.offsetHeight)) {
             _top = mainBox.clientHeight - element.offsetHeight;
         }
         if (t != element) {
            element.style.top = _top + "px";
            contentBox.style.top = -_top * (contentBox.offsetHeight / mainBox.offsetHeight) + "px";
            this._wheelData = _top;
        }
    }
},

 new createScroll('box', 'content', 'scrollDiv');