CSS滚动条样式修改

小万没想到

已于 2024-07-10 14:11:19 修改

阅读量101

点赞数 2

文章标签： css css3 html

于 2024-06-20 11:02:23 首次发布

本文链接：https://blog.csdn.net/wfyh1314/article/details/139825325

版权

浏览器自带的滚动条样式不够美观，css可以修改网页自带的滚动条样式，代码如下，复制即可使用。

::-webkit-scrollbar { /*滚动条整体样式*/
  width: 6px !important; /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px !important;
  background: #fff !important;
  cursor: pointer !important;

}

::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
  width: 0;
  border-radius: 5px !important;
  -webkit-box-shadow: inset 0 0 5px rgba(240, 240, 240, .5) !important;
  border: 3px solid #d6d8dc;
  cursor: pointer !important;
}

::-webkit-scrollbar-track { /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(240, 240, 240, .5) !important;
  border-radius: 0 !important;
  background: rgba(240, 240, 240, 0.5) !important;
  cursor: pointer !important;
}