ナレッジポイントは別の記事を参照できます。
知識が不足している場合は、クリックして次の記事にジャンプできます：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;
}
効果図は次のとおりです。
記事が良いと感じたら、必ず注意を払い、注意を払い、収集してください。間違いがあれば訂正してください。転載が必要な場合は、出典を明記してください。ありがとうございます。！！