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似乎没有作用。以后再慢慢研究吧。

如果您觉得文章内容对您有用,不妨支持我创作更多有价值的分享:


已发布

分类

来自

评论

欢迎吐槽,共同进步

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据