支持-webkit-前缀的浏览器修改滚动条样式

//血槽宽度

::-webkit-scrollbar {

    width:8px; height:8px;

}

//拖动条

    ::-webkit-scrollbar-thumb {

    background-color:rgba(0,0,0,.3);

    border-radius:6px;

}

//背景槽

    ::-webkit-scrollbar-track {

    background-color:#ddd;

    border-radius:6px;

}

效果如图

或者使用以下

　　 .sidebar {

        z-index: ;

        position: fixed;

        left: ;

        top: 64px;

        overflow-y: auto;

        overflow-x: hidden;

        background-color: #;

    }

    .sidebar::-webkit-scrollbar-track { /* 定义滚动条轨道  内阴影+圆角*/

        -webkit-box-shadow: inset   6px rgba(, , , 0.3);

        border-radius: 5px;

        background-color: #f5f5f5;

    }

    .sidebar::-webkit-scrollbar { /*滚动条整体样式*/

        width: 10px;

        background-color: #f5f5f5;

        border-radius: 5px;

    }

    .sidebar::-webkit-scrollbar-thumb { /*滚动条里面小方块*/

        border-radius: 5px;

        -webkit-box-shadow: inset   6px rgba(, , , 0.3);

        background-color: #;

    }