自定义滚动条样式 -webkit-scrollbar

webkit 定制滚动条

webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式。

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

• ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）

• ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）

• ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。

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

• ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处

• ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

  /* 定义滚动条的宽度 */
  div::webkit-scrollbar {
  	width: 10px;
  }
  /* 定义滚动条的轨道 */
  div::webkit-scrollbar-track {
  	background-color: #ccc;
  }
  /* 定义滚动条的滑块 */
  div::webkit-scrollbar-thumb {
  	background-color: #2bd4d;
  }
  

新语法

• scrollbar Width：定义滚动条的宽度，有两个值auto和thin。不能定义具体的数字。

  div {
  	scrollbar-width: thin;
  }
  

• Scrollbar Color：定义滚动条track和thumb的颜色。

  div {
  	scrollbar-color: #6969dd #e0e0e0;
  }