制做滚动条

    .box {
        width: 300px;
        height: 500px;
        border: 1px solid red;
        margin: 100px;
        position: relative;
        overflow: hidden;
    }
    .content {
        padding: 5px 18px  5px 5px;
        position: absolute;
        top: 0;
        left: 0;

    }
    .scroll {
        width: 18px;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        background-color: #eee;

    }
    .bar {
        height: 100px;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: blueviolet;
        border-radius: 10px;
        cursor: pointer;

    }

       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
       这是内容，你可以查阅。这是在做滚动条的练习。这是输入的练习文本。
      

   </div>
   <div class="scroll" id="scroll"> 
       <div class="bar" id="bar"></div>
   </div>

<script>
    // 1.根据内容的大小，计算滚动条的高度
    // 2.让滚动条能都拖拽
    // 3.当拖拽滚动条的时候，改变内容的位置
   var box = document.getElementById('box');
   var content = document.getElementById('content');
   var scroll = document.getElementById('scroll');
   var bar = document.getElementById('bar'); 
    //当内容的高度大于box的高度 ，再计算滚动条的高度，否则的话滚动条的高度为0；
    var barHeight = 0;
    if(content.scrollHeight>box.clientHeight){
        barHeight = box.clientHeight/content.scrollHeight*scroll.clientHeight; 
    }
  
      bar.style.height = barHeight+'px';

      //2.1 当鼠标按下的时候，求鼠标在滚动条中的位置
      bar.onmousedown = function (e){
          var y = e.pageY-bar.offsetTop- box.offsetTop;
      //2.2 当鼠标在页面上移动的时候，求滚动条的位置
      document.onmousemove = function (e) {
          var barY = e.pageY - y - box.offsetTop;
          barY = barY<0? 0 : barY;
          barY = barY > scroll.clientHeight - bar.clientHeight? scroll.clientHeight - bar.clientHeight: barY;
          bar.style.top = barY + 'px';
          var contentMax = content.scrollHeight - box.clientHeight;
          var barMax = scroll.clientHeight - bar.clientHeight;
          var contentY = barY/barMax * contentMax;
          content.style.top = -contentY + 'px';
      

      }

      } 
      document.onmouseup = function() {
          //移除鼠标移动的事件；
          document.onmousemove = null;
      }
      //内容滚动的距离/内容最大能滚动的距离= 滚动条滚动的距离/滚动条最大能滚动的距离
     
    
    
    </script>