Google新产品风格滚动条的实现方法

Google全线产品改版后，褒贬不一。不过它们滚动条看起来很漂亮，简单好看，有点Ubuntu的感觉。

不过实现起来并不复杂，研究之后，发现是这样定义CSS的：

::-webkit-scrollbar{
  width:6px;
}
::-webkit-scrollbar-track-piece{
  background:none;
}
::-webkit-scrollbar-thumb {
  background:#DCD9DE;
  border-radius:6px;
}
::-webkit-scrollbar-thumb:hover {
  background:#EAE6EA;
}

当然，看到”-webkit“，自然只有webkit内核的浏览器比如Chrome才生效（我没有测试Safari）。具体支持哪些样式暂时还不确定，Google搜索“-webkit-scrollbar”竟然没有结果。已知background、border这些都没问题，:hover这样的伪类也支持，margin、padding似乎没有作用。以后再慢慢研究吧。