程序猿日常小结：JS滚动条的制作

在做项目时我们通常要根据需求制作相关的滚动条，如何制作属于自己的精美滚动条呢？

下面是一个小例子，可以通过js封装，直接调用就可以了

滑块div

function srolldiv(wrapDiv,contentDiv,sliderWrap,sliders){
	 //设置比例 
    //clientHeight - 不包括border 
    var scale = wrapDiv.clientHeight / contentDiv.clientHeight; 
    //设置滑块的高度 
    var h1 = sliderWrap.clientHeight * scale; 
    //为了合理设置高度，设置滑块的最小高度 
    if (h1 < 50){
      h1 = 50;
    }else if (scale >= 1){ 
      //说明当前内容能过完全显示在可视区域内，不需要滚动条 
      sliderWrap.style.display = "none"; 
    }
    //设置滑块的高度 
      //slider.style.height = h1 +"px"; 
    //设置y轴的增量 
    var y = 0;
   
    //为wrap添加滚轮事件 
    wrapDiv.onmousewheel = function(e){
      var event1 = event || e 
      if (event.wheelDelta < 0){
        //滑动条向下滚动 
        y += 10;
      }else if (event.wheelDelta > 0){
        //滑动条向上滚动 
        y -= 10; 
      }
      var moveSlider=y+sliders.clientHeight;//滚动条移动高度   移动的距离+滑块高度
      //y变化时说明在滚动，此时使滚动条发生滚动，以及设置content内容部分滚动 
      //判断极端情况，滑块不能划出屏幕 
      if (y <= 0){
        //滑块最多滑到顶部 
        y = 0;
        moveSlider=0;
      }
      if(y >= sliderWrap.clientHeight - sliders.clientHeight){
        //滑块最多滑到最底部 
        y = sliderWrap.clientHeight - sliders.clientHeight; 
        moveSlider=y+sliders.clientHeight;//滚动条移动高度   移动的距离+滑块高度
      }
      //更新滑块的位置 
      sliders.style.top = y +"px";
      var proportionSlider=moveSlider/sliderWrap.clientHeight;//移动高度与滚动条高度的比例   
      var totalHeight=contentDiv.clientHeight-sliderWrap.clientHeight;//需要滚动的大div与滚动条的高度差，大div需要滚动的总高度
      var rollingHeight=proportionSlider*totalHeight;//大div滚动的高度  高度差*比例
     
    //更新轮播内容的位置
      contentDiv.style.top =  -rollingHeight +"px"; 
    }
    
    
   var isDrop = false; //移动状态的判断鼠标按下才能移动
    var divY;
    //鼠标拖动
    wrapDiv.onmousedown = function(e){
        var e = e || window.event; //要用event这个对象来获取鼠标的位置
        divY = e.clientY - sliders.offsetTop;
        isDrop = true; //设为true表示可以移动
    }
    //鼠标移动时
    wrapDiv.onmousemove = function(e){
        //是否为可移动状态 
        if(isDrop){
            var e = e || window.event;
            var moveY = e.clientY - divY; //得到距离上边距离
            var moveSlider=moveY+sliders.clientHeight;//滚动条移动高度   移动的距离+滑块高度
            //范围限定  当移动的距离最小时取最大  移动的距离最大时取最小
            //范围限定一
            if(moveY <= 0){
                moveY = 0;
                moveSlider=0;
            }else if(moveY>=sliderWrap.clientHeight - sliders.clientHeight){
            	//滑块最多滑到最底部 
                moveY = sliderWrap.clientHeight - sliders.clientHeight; 
                moveSlider=y+sliders.clientHeight;//滚动条移动高度   移动的距离+滑块高度
            }
          //更新滑块的位置 
            sliders.style.top = moveY + "px";
            var proportionSlider=moveSlider/sliderWrap.clientHeight;//移动高度与滚动条高度的比例   
            var totalHeight=contentDiv.clientHeight-sliderWrap.clientHeight;//需要滚动的大div与滚动条的高度差，大div需要滚动的总高度
            var rollingHeight=proportionSlider*totalHeight;//大div滚动的高度  高度差*比例
          //更新轮播内容的位置
            contentDiv.style.top = -rollingHeight +"px";
            y=moveY;//记录top距离，鼠标移动时方便获取
            }else{
               return;
            }
         }
    //鼠标放开
    wrapDiv.onmouseup = function(){
        isDrop = false; //设置为false不可移动
    }
}