define('scrollbar',['avalon-min','drag'],function(avalon,drag){ function scrollbar(wrap,scrollbar,height_per_scroll){//容器，滚动条，每次滚轮移动的距离 this.scroll_height=0;//滚动条高度 this.dragger=null;//drag组件实例 wrap.scrollTop=0; //容器的位置要减去浏览器最外面的默认滚动条垂直方向位置 var self=this,wrap_top=avalon(wrap).offset().top-avalon(document).scrollTop(); function ondragmove(drag){//drag组件拖动时的监听函数，更新容器视图 wrap.scrollTop=(parseFloat(scrollbar.style.top)-wrap_top)* (wrap.scrollHeight -wrap.clientHeight)/(wrap.clientHeight-self.scroll_height); }; function setScrollPosition(o) {//更新滚动条位置 scrollbar.style.top =o.scrollTop*wrap.clientHeight/wrap.scrollHeight+wrap_top+ 'px'; } function inti_events(){ avalon.bind(wrap,'mousewheel',function(e){ if(e.wheelDelta < 0) wrap.scrollTop+=height_per_scroll; else wrap.scrollTop-=height_per_scroll; setScrollPosition(wrap); e.preventDefault(); }); self.dragger=new drag(scrollbar,{container:wrap,axis:'y',ondragmove:ondragmove}); window.onresize=function(){ self.refresh_views(); self.dragger.refresh(); }; } this.refresh_views=function(){//更新组件所有部分视图，并暴露供外部调用 //容器高度这里设置成浏览器可视部分-容器垂直方向位置，没有考虑容器有border,padding,margin.可根据相应场景修改 wrap.style.height=document.documentElement.clientHeight-wrap_top+'px'; self.scroll_height=wrap.clientHeight*wrap.clientHeight/wrap.scrollHeight; //容器高度等于滚动条高度，隐藏滚动条 if(self.scroll_height==wrap.clientHeight) scrollbar.style.display='none'; else scrollbar.style.display='block'; scrollbar.style.height=self.scroll_height+'px'; setScrollPosition(wrap); } function init(){ self.refresh_views(); inti_events(); } init(); } return scrollbar; });
可以看到，在resize时，调用了drag组件的refresh方法，更新滚动条可以拖动的范围。这里暴露了refresh_views（）方法，以应对外部需要手动更新视图的情况。比如，聊天分组的折叠和展开。
这样就完成了简易滚动条。代码很简单，如果出问题需要fix bug或定制的话，也很容易。