自定义滚动条样式

// 自定义滚动条样式
.scroll {

  // 滚动条整体
  &::-webkit-scrollbar {
    width: 7px;
    height: 18px;
    border-radius: 100px;
  }

  // 滚动条-滚动滑块
  &::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background: rgba(42, 116, 138, 0.25);
  }

  // 滚动条-轨道
  &::-webkit-scrollbar-track {
    border-radius: 10px;
    background: none;
  }

  // 横、竖滚动条都有时右侧白边处理
  &::-webkit-scrollbar-corner {
    background-color: inherit !important;
  }

  // 滚动条上的按钮 (上下箭头)
  &::-webkit-scrollbar-button {
    
  }

  // 滚动条没有滑块的轨道部分
  &::-webkit-scrollbar-track-piece {
    
  }

}

你可能感兴趣的:(css3,css,前端)