全局滚动条样式

ccm__m

于 2025-04-08 11:00:20 发布

阅读量107

点赞数 1

CC 4.0 BY-SA版权

文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/ccm__m/article/details/147062800

简单设置一下滚动条样式，美化样式

/* 设置全局滚动条，美化样式 */
::-webkit-scrollbar{
  width: 4px;
  height: 6px;
}
/* 滚动条边角部分 */
::-webkit-scrollbar-corner{
  display: block;
}
/* 滚动条的小方块部分 */
::-webkit-scrollbar-thumb{
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.2);
}
/* 修改滚动条的轨道 */
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track{
  border-right-color: transparent;
  border-left-color: transparent;
  background-color: rgba(0, 0, 0, 0.1);
}