滚动条样式

1.认识滚动条

滚动条

2.设置样式

  //整体样式
::-webkit-scrollbar {
  width: 25px;  //x轴的滚动条大小
  height: 25px; //y轴的滚动条大小
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 5px solid transparent;
}

::-webkit-scrollbar-track {
  // 轨道样式
  display: none;
}

::-webkit-scrollbar-thumb {
  //滑块样式
  background: rgba(129, 129, 128, 0.3);
  background-clip: content-box;  //留白
}

::-webkit-scrollbar-corner {
  background: transparent;
}

3.效果

效果
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容