效果图:
代码如下:
html部分:
<ul class="subjectList"> <li>请先选择年级</li> <li>请先选择年级</li> <li>请先选择年级</li> <li>请先选择年级</li> </ul>
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
&::-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%); }