css修改浏览器默认滚动条样式

·港岛妹妹

于 2021-05-25 17:49:16 发布

阅读量1.1k

点赞数 1

分类专栏： HTMLandCSS 文章标签： html css

本文链接：https://blog.youkuaiyun.com/qq_44417271/article/details/117261192

版权

HTMLandCSS 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何使用CSS来修改浏览器的默认滚动条样式，包括滚动条的整体部分、按钮、轨道、滚动槽、滑块、边角和拖动块的样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


/*滚动条样式*/
::-webkit-scrollbar {
  width: 4px;
  /*height: 4px;*/
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

滚动条几个属性，主要有下面7个属性

::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式