CSS：美化滚动条

2022-09-19 周一

父元素添加样式

1.例：y轴滚动， 先给父元素盒子限定高度

.box{
  height:100px;
 overflow-y:scroll;
}

2. 然后再设置滚动条样式，less语法

.box{
  height: 100px;
  overflow-y: scroll;
  /* 定义滚动条样式 */
  &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
      background-color: rgba(240, 240, 240, 1);
  }
  /*定义滚动条轨道 内阴影+圆角*/
  &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
      border-radius: 10px;
      background-color: rgba(240, 240, 240, .5);
  }
  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      box-shadow: inset 0 0 0px gray;
      background-color: gray;
  }

}