Flecha de color de fondo de estilo de barra de desplazamiento personalizada CSS frontal y otras modificaciones (imagen más código fuente)

Los puntos de conocimiento pueden referirse a otro artículo:

Puntos de conocimiento insuficientes, puede hacer clic para pasar al siguiente artículo: Estilo de barra de desplazamiento personalizado CSS3

Precauciones:

El siguiente código no es compatible iecon Firefoxnavegadores .

El código fuente es el siguiente:

Los innecesarios se pueden comentar, y viceversa, la flecha se divide 上下左右, porque 横向压缩también aparecerá debajo del navegador.横向滚动条

El siguiente código pequeño se complementa con el código de estilo en la esquina inferior derecha y el efecto no ha cambiado:

/* 这个是后加的!!!下面效果图没有更换,右下角背景颜色 */
    ::-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;
    }

El diagrama de efectos es el siguiente:

Si siente que el artículo es bueno, recuerde prestar atención, preste atención y recójalo. Corríjame si hay algún error. Si necesita reimprimir, indique la fuente, ¡gracias! ! !