【css】滚动条webkit-scrollbar样式重置

不_足

已于 2022-11-17 15:21:48 修改

阅读量803

点赞数 1

分类专栏： css 文章标签： css css3

于 2022-11-16 13:50:33 首次发布

本文链接：https://blog.csdn.net/qq_37712910/article/details/124796313

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

::-webkit-scrollbar 仅在基于 Blink 或 WebKit 的浏览器（例如，Chrome、Edge、Opera、Safari、iOS 上所有的浏览器，以及其它基于 WebKit 的浏览器）上可用(修正版)

伪类	注解
::-webkit-scrollbar	滚动条整体部分
::-webkit-scrollbar-button	滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
::-webkit-scrollbar-track	外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
::-webkit-scrollbar-track-piece	内层轨道，滚动条中间部分（除去）。
::-webkit-scrollbar-thumb	滚动条里面可以拖动的那部分
::-webkit-scrollbar-corner	边角
::-webkit-resizer	定义右下角拖动块的样式

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track{
  border-radius: 10px;
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-corner{
  background-color: transparent;
}