content
Knowledge points can refer to another article:
Insufficient knowledge points, you can click to jump to the next article: CSS3 custom scroll bar style
Precautions:
The following code is not compatible
iewithFirefoxbrowsers
The source code is as follows:
Unnecessary can be commented out, and vice versa, the arrow is divided
上下左右, because it横向压缩will also appear under the browser横向滚动条
The following small code is supplemented by the style code in the lower right corner, and the effect has not been changed:
/* 这个是后加的!!!下面效果图没有更换,右下角背景颜色 */
::-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;
}
The effect diagram is as follows:
If you feel that the article is good, remember to pay attention, pay attention and collect it. Please correct me if there is any mistake. If you need to reprint, please indicate the source, thank you! ! !