chrome游览器滚动条样式，竖向滚动条高度发现改不了，只能改竖向的宽？

Question

问题描述

页面中间区域的滚动条，需求是：游览器默认的样式除了竖向滚动滑块的宽和里面滑块的高度，其他的都保留
简略期望结果大致如下

目前的效果

问题出现

一改，滚动条默认样式就全部没了。竖向滚动滑块的宽很好改，项目中已经改好，但是竖向滑块的高度不知道要怎么才能改动。

代码

     &::-webkit-scrollbar-thumb{  
      background-color:rgb(193, 193, 193);  
      height:65px;  
      outline-offset:-2px;  
      outline:2px solid #fff;  
      -webkit-border-radius:1px;  
      /*border: 2px solid #999;*/
      // background: #E2E2E2;
      // height:114px;
      // border-radius: 15px;
      // border-radius: 15px;
    }  

    /*---鼠标贴合滚动条样式---*/  
    &::-webkit-scrollbar-thumb:hover{  
      background: #CCCCCC;
      height:65px;  
      // -webkit-border-radius:1px;  
    }  

    /*---滚动条大小---*/  
    &::-webkit-scrollbar{  
      width:24px;  /*右侧竖向滚动条宽度*/
      height:16px;  /*底部横向滚动条高度*/
      border-radius: 15px;
    }  

    /*---滚动框背景样式---*/  
    &::-webkit-scrollbar-track-piece{  
      background: #EFEFEF;  
      -webkit-border-radius:1px;  
    }  

    /*---激活滚动条样式---*/
    &::-webkit-scrollbar-thumb:active{  
      height:90px;  
      background-color:#666;  
      -webkit-border-radius:1px;  
    }

Answer 1

这个高度是浏览器根据你卷入内容高度计算的，由于每个浏览器滚轮或者拖动的阈值是固定的所以改不了，
当然，如果不嫌麻烦，可以用div自己封装一个，滚动条也可以模拟，只要计算好页面高度，卷入内容高度，每滚动一次映射的内容高度就可以了