知识点可参考另一篇:
知识点不足,可点击跳转下一篇: 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;
}
效果图如下:
感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!