自定义滚动条样式

    /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        // background: #f77777;
    }

     /*定义两端按钮的样式，display:none可设置为不显示，也可以添加背景图片，颜色*/
    ::-webkit-scrollbar-button {
        display: none;
        background: #ffee07;

    /*外层轨道，定义滚动条的轨道颜色、内阴影及圆角。display:none可设置为不显示，也可以添加背景图片，颜色*/
    ::-webkit-scrollbar-track {
        background: #0988ff;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(255, 238, 0, 0.3) inset;
    }

    /* 内层轨道，如果设置了会覆盖::-webkit-scrollbar-track的样式 */
    ::-webkit-scrollbar-track-piece {
        background: #aeddf8; // 蓝色
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 255, 221, 0.5) inset;
    }

    /*滚动条拖动的部分*/
    ::-webkit-scrollbar-thumb {
        background: #ff7c3f; // 橙色
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(251, 255, 0, 0.6) inset;
    }

    /*定义右下角汇合处的样式*/
    ::-webkit-scrollbar-corner {
        background: #ffffff;
    }