前端css自定义滚动条样式背景颜色箭头等修改(图片加源码)

知识点可参考另一篇：

知识点不足，可点击跳转下一篇: CSS3自定义滚动条样式

注意事项：

下面代码不兼容ie,和Firefox浏览器

源码如下：

不需要的可以注释掉，反之亦然，箭头分为上下左右，因为横向压缩，浏览器下面也会出现横向滚动条

下面这小段代码是右下角样式代码补充一下，效果没更换:

/* 这个是后加的!!!下面效果图没有更换,右下角背景颜色 */
    ::-webkit-scrollbar-corner {
        background-color: #000D16;
    }

 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar {
        width: 20px;
        border-radius: 2px;
        opacity: 0.5;
        background-color: #000D16;
        border: 1px solid #162E8B;
    }

    /*定义滚动条轨道 内阴影+圆角*/
    /* ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #000D16;
        border-left: 1px solid #4A7EF2;
        border-right: 1px solid #4A7EF2;
    } */

    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
        /* position: absolute;
        width: 12px;
        height: 96px; */
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        background: #162E8B;
    }

    /* 这是总的上下左右四个箭头，需要宽度设置0，高度设置0，不然有默认按钮高度 */
    ::-webkit-scrollbar-button {
        width: 0px;
        height: 0px;
        /* display: block; */
    }

    /* 上面箭头 */
    ::-webkit-scrollbar-button:vertical:single-button:start {
        /* border: 1px solid red; */
        width: 20px;
        height: 15px;
        /* 3px 5px 移动图片位置 */
        background: url("./images/scrollbarTop.png") 3px 5px no-repeat;
        background-size: 12px 6px;
        cursor: pointer;
        background-color: #000D16;
        border-left: 1px solid #162E8B;
        border-right: 1px solid #162E8B;
        border-top: 1px solid #162E8B;
    }

    /* 下面箭头 */
    ::-webkit-scrollbar-button:vertical:single-button:end {
        /* border: 1px solid red; */
        width: 20px;
        height: 15px;
        background: url("./images/scrollbarBtn.png") 3px no-repeat;
        background-size: 12px 6px;
        cursor: pointer;
        background-color: #000D16;
        border-left: 1px solid #162E8B;
        border-right: 1px solid #162E8B;
        border-bottom: 1px solid #162E8B;
    }

    /* 最低下面左边 */
    ::-webkit-scrollbar-button:horizontal:single-button:start {
        /* border: 1px solid red; */
        width: 20px;
        height: 15px;
        background: url("./images/scrollLeft.png") 5px no-repeat;
        background-size: 9px 10px;
        cursor: pointer;
        background-color: #000D16;
        border-left: 1px solid #162E8B;
        border-top: 1px solid #162E8B;
        border-bottom: 1px solid #162E8B;
    }

    /* 最低下面右边 */
    ::-webkit-scrollbar-button:horizontal:single-button:end {
        /* border: 1px solid red; */
        width: 20px;
        height: 15px;
        background: url("./images/scrollRight.png") 5px no-repeat;
        background-size: 9px 10px;
        cursor: pointer;
        background-color: #000D16;
        border-right: 1px solid #162E8B;
        border-top: 1px solid #162E8B;
        border-bottom: 1px solid #162E8B;
    }
    
    /* 这个是后加的!!!下面效果图没有更换,右下角背景颜色 */
    ::-webkit-scrollbar-corner {
        background-color: #000D16;
    }

效果图如下：

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！