CSS 滚动条样式【兼容chrome、Firefox、IE】

css滚动条样式，windows系统下，滚动条比较丑，以下分别是chrome、Firefox、IE5.5+三大浏览器的改写方法。

Chrome：

原理：通过-webkit相关属性直接可以灵活控制滚动条样式。

::-webkit-scrollbar { /* 滚动条宽 */
  width: 6px;
  height: 4px;
}
::-webkit-scrollbar-thumb { /* 滚动条 拖动条 */
  background-color: rgba(0,0,0,.2);
  border-radius: 6px;
}
::-webkit-scrollbar-track { /* 滚动条背景槽 */
  background-color: #eee;
  border-radius: 6px;
}

Firefox：

原理：写在overflow-y同级的位置，将滚动条置为透明，以此规避丑丑的滚动条样式。

	  overflow-y: auto;
      scrollbar-color: transparent transparent;

IE：

原理：写在overflow-y同级的位置，由于在ie下transparent无效，故将滚动条置为页面背景色，以此规避丑丑的滚动条样式。

这几个属性文档说是兼容IE5.5，亲测IE11可以，低版本未测试。

用以下几个属性组合，就可以将滚动条变得和背景色一样：

	overflow-y: auto;
	scrollbar-arrow-color: #f0f2f5;  /* 设置滚动条上的箭头颜色  */
	scrollbar-base-color: #f0f2f5;  /* 设置滚动条的底色 */
	scrollbar-track-color: #f0f2f5;  /* 设置滚动条块的背景色 */
	scrollbar-shadow-color: #f0f2f5;  /* 设置箭头和滚动条右侧和底边的颜色 */

附：scrollbar- 相关属性（仅适用于IE）值介绍：