div模拟selection标签下拉列表

2018-07-12 07:59:53来源：博客园阅读 ()

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>垂直滚动条</title>
  <style type="text/css">
     .box{
       border:1px solid red;
       width:300px;
       height:500px;
       margin:50px auto;
       overflow:hidden;
       position:relative;
     }
     .content{
     height:1000px;
     padding-right:25px;
     position:relative;
     left:0;
     top:0;
     }
     .scrollBox{
       position:absolute;
       top:0;
       right:0;
       width:20px;
       height:500px;
       background:#b5b5b5;
     }
     .scroll{
       width:inherit;
       height:100px;
       background:#ff3300;
       position:absolute;
       left:0;
       top:0;
       cursor:pointer;
     }
  </style>
 </head>
 <body>
   <!--
     分析 
     就是一个大盒子
     里面有左右两个盒子
     左边:文字内容
     右边:一个背景滚动条  
     而且有一个子盒子(红色小方块)
     一共四个盒子
    结构:
    <div>
        <div></div>
        <div>
            <div></div>
        </div>
    </div>
   -->

 <div class="box">
   <div class="content">
    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9
 </div>
 <div class="scrollBox">
    <div class="scroll"></div>
       </div>
   </div>

    
   <script type="text/javascript">
   
   /*
     初步分析  应该是  红色滚动轴跟随鼠标移动
     然后内容根据红色滚动在父元素高度的距离百分比  我移动1%  你移动1%
     刚开始的 

                       
   
   */

   var scroll=document.querySelector(".scroll");
   var content=document.querySelector(".content");
   var scrollBox=document.querySelector(".scrollBox");
       /*内容越多的时候  滚动条应该越短
        公式就是   容器高度*容器高度/内容高度
                          一个属*一个小于一的数  永远不可能大于自己
                */            
        ~~function setScrollLength(){
              if(scroll.offsetHeight<=10){
               scroll.style.height="10px";
              }
              else{
              scroll.style.height=scrollBox.offsetHeight*scrollBox.offsetHeight/content.offsetHeight+"px"
              }
        
        }();


        ~~function start(){
        scroll.onmousedown=function(event){
            var that=this;
            var event=event||window.event;
            var top=event.clientY-this.offsetTop;
            var parentH=scrollBox.offsetHeight;
            document.onmousemove=function(event){

                 var event=event||window.event;
                 var y=event.clientY-top;
                 if(y<=0){
                   y=0;
                 }
                 else if(y>=parentH-that.offsetHeight){
                    y=parentH-that.offsetHeight;
                 }
                 that.style.top=y+"px";
                 /*
                     刚开始就 有滚动条的一部分距离   所以滚动条不可能运动和容器一样的高度
                     内容同理  内容也会显示一部分(容器高度的)内容
                     算比例就好了  滚动条运动的距离   内容应该移动的距离
                                            内容高度-容器高度/容器高度-滚动条的高度*滚动条移动的距离
                                            OK
                 */
                 var start=parentH-that.offsetHeight;
                 content.style.top=-1*parseFloat(content.offsetHeight-parentH)/start*y+"px";
                 //为了不让下拉滚动条的时候选中字体
                 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            
            }
        
        }
        document.onmouseup=function(){
          document.onmousemove=null;
        
        }
        }();
   </script>
 </body>
</html>