js实现滚动条（鼠标滚轮+鼠标拖动）

//html代码
<div class="layui-panel" id="box" style=" height: 100%;   width: 100%;  position: relative; /*超出隐藏*/ overflow: hidden;  " >
  <ul class="layui-menu" id="content" style="  height: 170px;width: 94%;overflow: hidden;float: left;  ">
    <li lay-options="{id:100}">
      <div class="layui-menu-body-title" style=" width: 294px;   vertical-align: top;  height: 30px;  text-align: left;  line-height: 30px; " >11</div>
    </li>
    <li lay-options="{id: 101}">
       <div class="layui-menu-body-title" style=" width: 294px;   vertical-align: top;  height: 30px;  text-align: left;  line-height: 30px; ">22</div>
    </li>
     <li lay-options="{id: 102}">
      <div class="layui-menu-body-title" style=" width: 294px;   vertical-align: top;  height: 30px;  text-align: left;  line-height: 30px; " >33</div>
    </li>
     <li lay-options="{id: 103}">
      <div class="layui-menu-body-title" style=" width: 294px;  vertical-align: top;  height: 30px;  text-align: left;  line-height: 30px; " >44</div>
    </li>
    <li lay-options="{id: 104}">
      <div class="layui-menu-body-title" style=" width: 294px;  vertical-align: top;  height: 30px;  text-align: left;  line-height: 30px; " >55</div>
    </li>
     <li lay-options="{id: 105}">
      <div class="layui-menu-body-title" style=" width: 294px;  vertical-align: top;  height: 30px;  text-align: left;  line-height: 30px; " >66</div>
    </li>
      <li lay-options="{id: 105}">
      <div class="layui-menu-body-title" style=" width: 294px;  vertical-align: top;  height: 30px;  text-align: left;  line-height: 30px; " >77</div>
    </li>
      <li lay-options="{id: 105}">
      <div class="layui-menu-body-title" style=" width: 294px;  vertical-align: top;  height: 30px;  text-align: left;  line-height: 30px; " >88</div>
    </li>
      <li lay-options="{id: 105}">
      <div class="layui-menu-body-title" style=" width: 294px;  vertical-align: top;  height: 30px;  text-align: left;  line-height: 30px; " >99</div>
    </li>
  </ul>
  <div id="scroll" style="  float: left;height: 170px;width: 10px; background-color:grey;border-radius:10px; "> 
        <div id="scrollTrack" style="  background-color: white;border-radius:10px;width:8px;margin-left:1px;  "> 
           
        </div> 
      </div> 
</div>

//js代码
layui.use('dropdown', function(){
  var dropdown = layui.dropdown;
  //菜单点击事件，其中 docDemoMenu1 对应的是菜单结构上的 id 指
  
  dropdown.on('click(docDemoMenu1)', function(options){
    var othis = $(this); //当前菜单列表的 DOM 对象
    // console.log(othis,"othis11111")
    //  console.log(othis.context.innerText,"othisothis22222"); 
    //   console.log(options,"options1313"); //菜单列表的 lay-options 中的参数
    //  console.log(options,"options")
  });
});
    var content = document.getElementById('content')
        var scroll = document.getElementById('scroll')
        var scrollTrack = document.getElementById('scrollTrack')
        //判断是否需要滚动条 
        if(content.clientHeight < content.scrollHeight ){
        //滚动条的高度 / 轨道高度 = 盒子高度 / 内容高度
            scrollTrack.style.height  = content.clientHeight/content.scrollHeight*scroll.offsetHeight + 'px'
        }
        //拖动事件
        scrollTrack.onmousedown = function(e){
    //    // 处理双滚动条冲突  // 滚动条消失
      var mo=function(e){e.preventDefault();};
        document.body.style.overflow='hidden';
        document.addEventListener("touchmove",mo,false);//禁止页面滑动
            //鼠标滚动条中的高度 = 鼠标的Y轴坐标 - 滚动条距离Body的高度
            var mouseY = e.pageY - scrollTrack.offsetTop 
            //滚动条在轨道中的偏移距离 =  鼠标的Y轴坐标 - 轨道距离body的高度 - 鼠标在滚动条中的高度
            var Y = e.pageY - scroll.offsetTop -mouseY
            //滚动条的最大滚动距离 = 轨道高度 - 滚动条高度 
            var maxY = scroll.offsetHeight - scrollTrack.offsetHeight;
            document.onmousemove = function(e){
                Y = e.pageY - scroll.offsetTop  -mouseY
                if(Y < 0){
                    Y = 0
                }
                if(Y > maxY){
                    Y = maxY
                }
                //设置滚动条在轨道中的距离上方的距离  
                scrollTrack.style.marginTop = Y +'px'
                //内容的滚动距离 = 滚动条的滚动距离 / 最大滚动距离  * 内容最大滚动距离
                content.scrollTop = Y/maxY*(content.scrollHeight - content.offsetHeight)
            }            
        }
        //滚轮事件
        scroll.onmouseenter = function(e){
            //滚动条的滚动距离 = 鼠标的Y轴坐标 - 滚动条距离Body的高度
    //            // 处理双滚动条冲突 // 滚动条消失
      var mo=function(e){e.preventDefault();};
      document.body.style.overflow='hidden';
      document.addEventListener("touchmove",mo,false);//禁止页面滑动
            var Y = e.pageY - scroll.offsetTop
            //滚动条的最大滚动距离 = 轨道高度 - 滚动条高度 
            var maxY = scroll.offsetHeight - scrollTrack.offsetHeight;
            document.onmousewheel = function(e){
                // 内容的滚动距离 = 内容本来滚动的距离 + 滚轴相对滚动的距离
                content.scrollTop = content.scrollTop - e.wheelDelta
                // 滚轮滚动距离 = 内容滚动距离 /内容最大滚动距离 * 滚动条最大滚动距离
                //-2 是为了防止滚动条溢出轨道
                scrollTrack.style.marginTop = (content.scrollTop ) / ( content.scrollHeight - content.offsetHeight) * ( maxY-2) +'px'
            }  
        }
    // 处理双滚动条冲突
    box.onmouseleave = function(){
    //   /***取消滑动限制***/
        var mo=function(e){
            e.preventDefault();
        };
        document.body.style.overflow='';//出现滚动条
        document.removeEventListener("touchmove",mo,false);
    }

        document.onmouseup = function(){
            document.onmousemove = null;
        }
        scroll.onmouseleave = function(){
            document.onmousewheel = null;
        }