第48天：垂直滚动条

朴灿烈づ我的快乐病毒、 2022-02-09 20:51 251阅读 0赞

垂直滚动条

1 <!DOCTYPE html>
      2 <html>
      3 <head lang="en">
      4     <meta charset="UTF-8">
      5     <title></title>
      6     <style>
      7         .box {
         
      8             width: 300px;
      9             height: 500px;
     10             border: 1px solid red;
     11             margin:100px;
     12             position: relative;
     13         }
     14         .content {
         
     15             height: auto;
     16             padding: 5px 18px 5px 5px;
     17             position: absolute;
     18             top: 0;
     19             left: 0;
     20         }
     21         .scroll {
         
     22             width: 18px;
     23             height: 100%;
     24             position: absolute;
     25             top: 0;
     26             right: 0;
     27             background-color: #eee;
     28         }
     29         .bar {
         
     30             width: 100%;
     31             height: 100px;
     32             background-color: red;
     33             cursor: pointer;
     34             border-radius: 10px;
     35             position: absolute;
     36             top: 0;
     37             left: 0;
     38         }
     39     </style>
     40 </head>
     41 <body>
     42 <div class="box" id="box">
     43     <div class="content">
     44      文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
     45      文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
     46      文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
     47      文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
     48      文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
     49      文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内     文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
     50      文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
     51      文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
     52 
     53     </div>
     54     <div class="scroll">
     55         <div class="bar"></div>
     56     </div>
     57 </div>
     58 </body>
     59 </html>
     60 <script>
     61     var box = document.getElementById("box");  // 最大的盒子
     62     var content = box.children[0];  // 内容盒子
     63     var scroll = box.children[1];  // 右边盒子
     64     var bar = scroll.children[0];
     65    // 1. 首先先要计算红色滚动条的高度    内容越多，滚动条越短    反之  反之
     66    // 滚动条的长度计算公式:  容器的高度 / 内容的高度 * 容器的高度
     67    // box 是 内容盒子一半  那么红色盒子也要是box盒子的一半
     68     var barHeight = box.offsetHeight / content.offsetHeight * box.offsetHeight;
     69     bar.style.height = barHeight + "px";
     70    // 下面开始 拖动 红色盒子
     71     startScroll(bar,content);  // 第一次参数 拖动的   第二个参数 内容的盒子
     72    function startScroll(obj,target) {
     73        obj.onmousedown = function(event) {
     74            // alert(11);
     75            var event = event || window.event;
     76            var t = event.clientY - this.offsetTop ; // 红色盒子距离 父亲 盒子顶部距离
     77            var that = this;  // 把 bar 对象给 that 对象
     78            document.onmousemove = function(event) {
     79                var event = event || window.event;
     80                var barTop = event.clientY - t ;  // 红色移动的距离
     81                //内容盒子要移动距离
     82                // （内容盒子高度 -  大盒子高度） /  (大盒子高度 - 红色盒子的高度)   * 红色盒子移动的数值
     83                var contentTop = (target.offsetHeight - target.parentNode.offsetHeight) / (target.parentNode.offsetHeight - that.offsetHeight) *  barTop;
     84                // 内容盒子移动的距离
     85                if(barTop < 0)
     86                {
     87                    barTop = 0;
     88                }
     89                else if(barTop > target.parentNode.offsetHeight - that.offsetHeight)
     90                // 大于  大盒子的高度  -  红色盒子的高度
     91                {
     92                    barTop = target.parentNode.offsetHeight - that.offsetHeight ;
     93                }
     94                else
     95                {
     96                    target.style.top = -contentTop + "px";  // 往上走是负值
     97                }
     98                that.style.top = barTop + "px";
     99                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();   // 防止拖动滑块的时候， 选中文字
    100            }
    101        }
    102            document.onmouseup = function() {
    103              document.onmousemove = null;
    104        }
    105    }
    106 </script>
    
    运行效果：

附加：

![img_837f3bfad1be1144c9e31c00e1ff0503.jpeg][]

[img_837f3bfad1be1144c9e31c00e1ff0503.jpeg]: /images/20220210/badb779996bb4770b3c7664b4f281550.png