1.滚动条组成

  ::-webkit-scrollbar 滚动条整体部分

  ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）

  ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）

  ::-webkit-scrollbar-button 滚动条的轨道的两端按钮css改变滚动条颜色，允许通过点击微调小方块的位置。

  ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）

  ::-webkit-scrollbar-corner 边角css改变滚动条颜色，即两个滚动条的交汇处

  ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

  2.修改浏览器的滚动条样式

  heml代码

  <pre class="has"> </pre>

  css代码

  <pre class="has">` .box{

        height: 2000px;
    }
    /* 滚动条的整体样式 */
    ::-webkit-scrollbar{
        width: 8px;
        height: 8px;
    }
    /* 滚动条的滚动轨迹 */
    ::-webkit-scrollbar-track{
        border-radius: 8px;
        background-color: hotpink;
        -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2) inset;
    }
    /* 滚动条上面的小滑块 */
    ::-webkit-scrollbar-thumb{
        border-radius: 8px;
        -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
        background-color: pink;
    }`</pre>

  3.修改自定义盒子的滚动条样式

  html代码

  <pre class="has">`

    
        ##muzidigbig
        <p style="height:200px;">这是内容111

        &emsp;&emsp;这里是内容222

        &emsp;&emsp;这里是内容333

    
`</pre></p>

  css代码

  <pre class="has">` .inner{

        width: 265px;
        height: 400px;
        position: absolute;
        top: 33px;
        left: 13px;
        /*cursor: pointer;*/
        overflow:hidden;
    }
    .innerbox{
        overflow-x: hidden;
        overflow-y: auto;
        color: #000;
        font-size: .7rem;
        font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,"黑体",Arial,Tahoma;
        height: 100%;
    }
    /*滚动条样式*/
    .innerbox::-webkit-scrollbar {/*滚动条整体样式*/
        width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 4px;
    }
    /*滚动条的轨道*/
    .innerbox::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 5px;
        background: rgba(0,0,0,0.1);
    }
    /*滚动条里面小滑块*/
    .innerbox::-webkit-scrollbar-thumb {
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(0,0,0,0.2);
    }`</pre>

  若有不足请多多指教！希望给您带来帮助！