CSS3：scrollbar样式设置

CSS3：scrollbar样式设置

1. 设置出现滚动条的方式

overflow:scroll --- x和y方向都会出现滚动条

或者

overflow-x:scroll --- 只有x方向出现滚动条

或者

overflow-y:scroll --- 只有y方向出现滚动条

---

当块级内容区域超出块级元素范围的时候，就会以滚动条的形式展示，你可以滚动里面的内容，里面的内容不会超出块级区域范围。有时候我们需要自定义滚动条的样式，比如一开始就让它显示，改变滚动条的颜色，设置轨道的样式等。

---

2.认识滚动条

::-webkit-scrollbar --- 滚动条整体部分

::-webkit-scrollbar-button --- 滚动条两端的按钮

::-webkit-scrollbar-track --- 外层轨道

::-webkit-scrollbar-track-piece --- 内层轨道，滚动条中间部分（除去）

::-webkit-scrollbar-thumb --- 滚动条里面可以拖动的那个

::-webkit-scrollbar-corner --- 边角

::-webkit-resizer --- 定义右下角拖动块的样式

---

3.改变滚动条样式

使用方式：

点击查看代码

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 8px;  /*对应竖滚动条的宽度*/
  height : 8px;  /*对应横滚动条的高度*/
}
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  /* border-radius: 6px; */
  background-color: #9e9e9e;
}
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  background: #ffffff;
  /* border-radius: 6px; */
}

---

4.滚动条伪类

任何对象都可以设置：边框、阴影、背景图片等等，创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中。

---

:vertical --- 适用于任何垂直方向的滚动条。

:no-button --- 表示轨道结束的位置没有按钮。

:horizontal --- 适用于任何水平方向上的滚动条。

:corner-present --- 表示滚动条的角落是否存在。

:decrement --- 适用于按钮和轨道碎片。表示递减的按钮或轨道碎片。

:increment --- 适用于按钮和轨道碎片。表示递增的按钮或轨道碎片。

:end --- 适用于按钮和轨道碎片。表示对象（按钮轨道碎片）是否放在滑块的后面。

:double-button --- 适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。

:single-button --- 适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。

:start --- 适用于按钮和轨道碎片。表示对象（按钮轨道碎片）是否放在滑块的前面。

:window-inactive --- 适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。

---

5.参考文章

css scrollbar样式设置：https://segmentfault.com/a/1190000012800450