当页面中有很多滚动条，它们相互嵌套，很不好看，这时就会模拟滚动条，并给这个滚动条好看的样式，使得页面美观。
模拟滚动条很多时候是去用jquery插件，然后写几行代码就搞定了。不过随着mvvm的快速发展，很多时候都懒得用jquery了，这就是本文的动机，本屌力求用简单的不依赖jquery只依赖mvvm(avalon) api的代码,完成一个简易的滚动条。
要求:
1.鼠标滚轮可以让滚动条工作,界面滚动
2.鼠标可以拖动滚动条并让界面滚动
3.页面resize时，滚动条根据页面尺寸变化，仍然可以工作
效果:
很显然，这个组件是基于拖动drag的，本屌又不想重新写，就只有改下ui框架的drag了，这里改的是easy js ui的drag组件。用easy js是因为注释比较多，代码简洁。
本屌把easy js ui的drag组件里的相应方法换成avalon api里的方法，删掉prototype里的方法及冗余代码
define('drag',['avalon-min'],function(avalon){ function getBoundary(container, target) { var borderTopWidth = 0, borderRightWidth = 0, borderBottomWidth = 0, borderLeftWidth = 0, cOffset = avalon(container) .offset(), cOffsetTop = cOffset.top, cOffsetLeft = cOffset.left, tOffset = avalon(target) .offset(); borderTopWidth = parseFloat(avalon.css(container,'borderTopWidth')); borderRightWidth = parseFloat(avalon.css(container,'borderRightWidth')); borderBottomWidth = parseFloat(avalon.css(container,'borderBottomWidth')); borderLeftWidth = parseFloat(avalon.css(container,'borderLeftWidth')); cOffsetTop = cOffsetTop - tOffset.top + parseFloat(avalon(target).css('top')); cOffsetLeft = cOffsetLeft - tOffset.left + parseFloat(avalon(target).css('left')); return { top : cOffsetTop + borderTopWidth, right : cOffsetLeft + avalon(container).outerWidth() - avalon(target).outerWidth() - borderRightWidth, left : cOffsetLeft + borderLeftWidth, bottom : cOffsetTop + avalon(container).outerHeight() - avalon(target).outerHeight() - borderBottomWidth }; } var drag = function(target, options) { var defaults = { axis:null, container:null, handle:null, ondragmove:null }; var o =avalon.mix(defaults,options), doc = target.ownerDocument, win = doc.defaultView || doc.parentWindow, originHandle=target, isIE =!-[1,], handle = isIE ? target :doc, container = o.container ?o.container: null, count = 0, drag = this, axis = o.axis, isMove = false, boundary, zIndex, originalX, originalY, clearSelect = 'getSelection' in win ? function(){ win.getSelection().removeAllRanges(); } : function(){ try{ doc.selection.empty(); } catch( e ){}; }, down = function( e ){ o.isDown = true; var newTarget = target, left, top, offset; o.width = avalon(target).outerWidth(); o.height = avalon(target).outerHeight(); o.handle = handle; left = avalon(newTarget).css( 'left' ); top = avalon(newTarget).css( 'top' ); offset = avalon(newTarget).offset(); drag.left = left = parseInt( left ); drag.top = top = parseInt( top ); drag.offsetLeft = offset.left; drag.offsetTop = offset.top; originalX = e.pageX - left; originalY = e.pageY - top; if( (!boundary && container)){ boundary = getBoundary(container, newTarget ); } if( axis ){ if( axis === 'x' ){ originalY = false; } else if( axis === 'y' ){ originalX = false; } } if( isIE ){ handle.setCapture(); } avalon.bind(handle,'mousemove',move); avalon.bind(handle,'mouseup',up); if( isIE ){ avalon.bind(handle,'losecapture',up); } e.stopPropagation(); e.preventDefault(); }, move = function( e ){ if( !o.isDown ){ return; } count++; if( count % 2 === 0 ){ return; } var currentX = e.pageX, currentY = e.pageY, style = target.style, x, y, left, right, top, bottom; clearSelect(); isMove = true; if( originalX ){ x = currentX - originalX; if( boundary ){ left = boundary.left; right = boundary.right; x = x < left ? left : x > right ? right : x; } drag.left = x; drag.offsetLeft = currentX - e.offsetX; style.left = x + 'px'; } if( originalY ){ y = currentY - originalY; if( boundary ){ top = boundary.top; bottom = boundary.bottom; y = y < top ? top : y > bottom ? bottom : y; } drag.top = y; drag.offsetTop = currentY - e.offsetY; style.top = y + 'px'; } o.ondragmove.call(this,drag); e.stopPropagation(); }, up = function( e ){ o.isDown = false; if( isIE ){ avalon.unbind(handle,'losecapture' ); } avalon.unbind( handle,'mousemove'); avalon.unbind( handle,'mouseup'); if( isIE ){ handle.releaseCapture(); } e.stopPropagation(); }; avalon(originHandle).css( 'cursor', 'pointer' ); avalon.bind( originHandle,'mousedown', down ); drag.refresh=function(){ boundary=getBoundary(container,target); }; }; return drag; });
另外在最后暴露的drag上加了一个refresh（）方法，作用是在resize时，需要更新滚动条可以拖动的范围。这个方法在scrollbar的更新视图中会用到。
drag.refresh=function(){ boundary=getBoundary(container,target); };
还有在滚动条拖动过程move中，添加一个钩子，允许从外面添加一个监听函数，拖动时会触发监听函数，并传入drag参数。
o.ondragmove.call(this,drag);
然后是scrollbar.js