Java滚动条外观_css自定义scroll滚动条样式

效果图:

代码如下:

html部分:

• 请先选择年级
• 请先选择年级
• 请先选择年级
• 请先选择年级

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

&::-webkit-scrollbar {

width: 10px;

//height: 10px;

//background-color: #F5F5F5;

}

/*定义滚动条轨道 内阴影+圆角*/

&::-webkit-scrollbar-track{

//-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);

//border-radius: 10px;

//background-color: #F5F5F5;

}

/*定义滑块 内阴影+圆角*/

&::-webkit-scrollbar-thumb{

border-radius: 10px;

//-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);

background: linear-gradient(to bottom, transparent 0%, transparent 20%,#efefef 22%, #efefef 75%,transparent 77%, transparent 100%);

}