滚动条样式

合集 - css效果(3)

1.3D卡片光效2024-03-242.文字下滑线渐变效果2024-03-24

3.滚动条样式2024-10-16

收起

.scroll-wrapper::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.scroll-wrapper::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: #fff;
}
.scroll-wrapper::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  border-radius: 10px;
  background: #fff;
}
.scroll-wrapper:hover {
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #d7d8dd;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面小方块*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #fff;
  }
}