/*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 10px;
height: 10px;
// background: #f77777;
}
/*定义两端按钮的样式,display:none可设置为不显示,也可以添加背景图片,颜色*/
::-webkit-scrollbar-button {
display: none;
background: #ffee07;
/*外层轨道,定义滚动条的轨道颜色、内阴影及圆角。display:none可设置为不显示,也可以添加背景图片,颜色*/
::-webkit-scrollbar-track {
background: #0988ff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(255, 238, 0, 0.3) inset;
}
/* 内层轨道,如果设置了会覆盖::-webkit-scrollbar-track的样式 */
::-webkit-scrollbar-track-piece {
background: #aeddf8; // 蓝色
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 255, 221, 0.5) inset;
}
/*滚动条拖动的部分*/
::-webkit-scrollbar-thumb {
background: #ff7c3f; // 橙色
border-radius: 10px;
box-shadow: 0 0 10px rgba(251, 255, 0, 0.6) inset;
}
/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {
background: #ffffff;
}
自定义滚动条样式
最新推荐文章于 2024-06-05 09:46:36 发布