[学习笔记]如何定义滚动条样式

75 阅读1分钟
.reset-overflow {
      overflow-y: scroll;
      
      /* 定义滚动条样式 */
      &::-webkit-scrollbar {
        width: 3px;
        height: 5px;
        /* background-color: rgba(100, 104, 105, 1); */
        border-radius: 10px;
      }
      /*定义滚动条轨道 内阴影+圆角*/
      &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
        border-radius: 10px;
        background-color: rgba(100, 104, 105, 1);
      }
      /*定义滑块 内阴影+圆角*/
      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
        background-color: rgba(86, 233, 255, 1);
      }
}
```
```