修改滚动条样式

出现滚动条的条件

1. 父元素固定宽高(或者设置max-height,max-width)
2. 子元素超过父元素固定的宽高，或者超过父元素设置的最大宽度/最大高度
3. 父元素设置overflow: auto

注：overflow: auto 其实为overflow-x: auto 和overflow-y: auto的简写形式

可对x轴滚动条和y轴滚动条显示情况单独设置

参数	描述
auto	不超过宽度或高度时则不显示滚动条，超过宽度或高度时自动显示滚动条
hidden	不管有没有超过宽度或高度，不显示滚动条（隐藏滚动条）
scroll	不管有没有超过宽度或高度，必定显示滚动条

修改滚动条样式

默认的滚动条样式有点丑，可以使用css对滚动条的样式进行设置（滚动条在父元素上），可设置的滚动条伪元素如下：

滚动条伪元素	描述
::-webkit-scrollbar	整个滚动条
::-webkit-scrollbar-thumb	滚动条上的滚动滑块
::-webkit-scrollbar-track	滚动条轨道
::-webkit-scrollbar-track-piece	滚动条没有滑块的轨道部分
::-webkit-scrollbar-button	滚动条上的按钮 (上下箭头)
::-webkit-scrollbar-corner	当同时有垂直滚动条和水平滚动条时交汇的部分
::-webkit-resizer	某些元素的corner部分的部分样式(例:textarea的可拖动按钮)
::-webkit-scrollbar-button:horizontal:single-button:start	水平滚动条左边按钮
::-webkit-scrollbar-button:horizontal:single-button:end	水平滚动条右边按钮
::-webkit-scrollbar-button:vertical:single-button:start	垂直滚动条上边按钮
::-webkit-scrollbar-button:vertical:single-button:end	垂直滚动条下边按钮

简单示例：

  /*outer-box为父元素*/
	
  /*滚动条整体样式 此时为Y轴滚动，设置宽度，当为X轴滚动时，则设置高度*/
  .outer-box::-webkit-scrollbar {
    width: 8px;  
  }
  /*滚动条里面的滑块*/
  .outer-box::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: #d5d5d5;
  }
  /*滚动条轨迹*/
  .outer-box::-webkit-scrollbar-track {
    border-radius: 2px;
    background: #f1f1f1;
  }

一般使用::-webkit-scrollbar、::-webkit-scrollbar-thumb和::-webkit-scrollbar-track这三个伪元素设置即可

::-webkit-scrollbar这个伪元素必须写，否则无法修改默认样式