css自定义scroll滚动条样式

SOASPX 14962 0

scroll滚动效果图:

css自定义scroll滚动条样式-第1张图片-.net教程网

代码如下:

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%);
}

标签: css

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~