快捷導(dǎo)航

原生js實(shí)現(xiàn)模擬滾動(dòng)條

更新時(shí)間：2024年09月27日 16:50:34 投稿：hebedich

本文給大家分享的是使用原生javascript實(shí)現(xiàn)模擬滾動(dòng)條的方法及代碼，效果非常棒，有需要的小伙伴可以參考下。

當(dāng)頁(yè)面中有很多滾動(dòng)條，它們相互嵌套，很不好看，這時(shí)就會(huì)模擬滾動(dòng)條，并給這個(gè)滾動(dòng)條好看的樣式，使得頁(yè)面美觀。

模擬滾動(dòng)條很多時(shí)候是去用jquery插件，然后寫幾行代碼就搞定了。不過(guò)隨著mvvm的快速發(fā)展，很多時(shí)候都懶得用jquery了，這就是本文的動(dòng)機(jī)，力求用簡(jiǎn)單的不依賴jquery只依賴mvvm(avalon) api的代碼,完成一個(gè)簡(jiǎn)易的滾動(dòng)條。

要求:

1.鼠標(biāo)滾輪可以讓滾動(dòng)條工作,界面滾動(dòng)

2.鼠標(biāo)可以拖動(dòng)滾動(dòng)條并讓界面滾動(dòng)

3.頁(yè)面resize時(shí)，滾動(dòng)條根據(jù)頁(yè)面尺寸變化，仍然可以工作

效果:

很顯然，這個(gè)組件是基于拖動(dòng)drag的，本人又不想重新寫，就只有改下ui框架的drag了，這里改的是easy js ui的drag組件。用easy js是因?yàn)樽⑨尡容^多，代碼簡(jiǎn)潔。

本人把easy js ui的drag組件里的相應(yīng)方法換成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上加了一個(gè)refresh（）方法，作用是在resize時(shí)，需要更新滾動(dòng)條可以拖動(dòng)的范圍。這個(gè)方法在scrollbar的更新視圖中會(huì)用到。

    drag.refresh=function(){
      boundary=getBoundary(container,target);
    };

還有在滾動(dòng)條拖動(dòng)過(guò)程move中，添加一個(gè)鉤子，允許從外面添加一個(gè)監(jiān)聽函數(shù)，拖動(dòng)時(shí)會(huì)觸發(fā)監(jiān)聽函數(shù)，并傳入drag參數(shù)。

o.ondragmove.call(this,drag);

然后是scrollbar.js

define('scrollbar',['avalon-min','drag'],function(avalon,drag){
  function scrollbar(wrap,scrollbar,height_per_scroll){//容器，滾動(dòng)條，每次滾輪移動(dòng)的距離
    this.scroll_height=0;//滾動(dòng)條高度
    this.dragger=null;//drag組件實(shí)例
    wrap.scrollTop=0;
    //容器的位置要減去瀏覽器最外面的默認(rèn)滾動(dòng)條垂直方向位置
    var self=this,wrap_top=avalon(wrap).offset().top-avalon(document).scrollTop();
    function ondragmove(drag){//drag組件拖動(dòng)時(shí)的監(jiān)聽函數(shù)，更新容器視圖
      wrap.scrollTop=(parseFloat(scrollbar.style.top)-wrap_top)*
      (wrap.scrollHeight -wrap.clientHeight)/(wrap.clientHeight-self.scroll_height);
    };
    function setScrollPosition(o) {//更新滾動(dòng)條位置
      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(){//更新組件所有部分視圖，并暴露供外部調(diào)用
      //容器高度這里設(shè)置成瀏覽器可視部分-容器垂直方向位置，沒有考慮容器有border,padding,margin.可根據(jù)相應(yīng)場(chǎng)景修改
      wrap.style.height=document.documentElement.clientHeight-wrap_top+'px';
      self.scroll_height=wrap.clientHeight*wrap.clientHeight/wrap.scrollHeight;
      //容器高度等于滾動(dòng)條高度，隱藏滾動(dòng)條
      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時(shí)，調(diào)用了drag組件的refresh方法，更新滾動(dòng)條可以拖動(dòng)的范圍。這里暴露了refresh_views（）方法，以應(yīng)對(duì)外部需要手動(dòng)更新視圖的情況。比如，聊天分組的折疊和展開。