自定义滚动条（css）

一、认识滚动条

::-webkit-scrollbar	滚动条整体
::-webkit-scrollbar-thumb	滚动条滑块
::-webkit-scrollbar-track	滚动条轨道
::-webkit-scrollbar-button	滚动条轨道两端按钮
::-webkit-scrollbar-track-piece	滚动条内层轨道
::-webkit-scrollbar-corner	滚动条交汇处
::-webkit-resizer	滚动条的交汇处用于通过拖动调整元素大小的小控件

---

二、自定义滚动条（css）

::-webkit-scrollbar {
        width: 15px;
      }
      ::-webkit-scrollbar-thumb {
        background-color: lightsteelblue;
      }
      ::-webkit-scrollbar-track {
        background-color: lightgreen;
      }
      ::-webkit-scrollbar-thumb:horizontal {
        background-color: lightseagreen;
      }
      ::-webkit-scrollbar-track:horizontal {
        background-color: lightsalmon;
      }
      ::-webkit-scrollbar-corner {
        background-color: lightcoral;
      }

效果图

---

三、滚动条可用伪类 

:horizontal	适用于水平方向上的滚动条
:vertical	适用于垂直方向上的滚动条
:decrement	适用于使区域向上或者向右移动的按钮
:increment	适用于使区域向下或者向左移动的按钮
:start	表示按钮或轨道碎片是否放在滑块的前面
:end	表示按钮或轨道碎片是否放在滑块的后面
:double-button	判断轨道结束的位置是否是一对按钮
:single-button	判断轨道结束的位置是否是一个按钮
:no-button	表示轨道结束的位置没有按钮。
:corner-present	表示滚动条的角落是否存在
:window-inactive	适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候

---

关键字：css、webkit、scroll、滚动条