當頁面中有很多滾動條,它們相互嵌套,很不好看,這時就會模擬滾動條,並給這個滾動條好看的樣式,使得頁面美觀。
模擬捲軸很多時候是去用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
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或客製化的話,也很容易。
以上所述上就是本文的全部內容了,希望大家能夠喜歡。