新版Google文档UI中的滚动条是如何风格化的（尤其是箭头按钮）？ [英] How are scrollbars in new Google Docs UI styled (esp. the arrow buttons)?

问题描述

新版Google文件使用者介面配有很酷的灰色滚动条。

The new Google Docs UI features cool gray scrollbars.

这些似乎是使用 :: - webkit-scrollbar-thumb 。

但是，我无法看到箭头按钮出现（在屏幕截图上圈出）。检查器不显示对应的DOM元素或任何特殊的CSS。

However, I can't get arrow buttons to appear (circled on the screenshot). Inspector shows no corresponding DOM elements or any special CSS. So the question is, how these custom scrollbars are made, including the arrow buttons?

请检查这个小提琴。

编辑：

所以似乎只是不是所有的css规则出现在检查器中。

So it seems that just not all css rules appear in the Inspector.

特别的，你需要 -webkit-scrollbar-button：vertical：decrement 和 :: - webkit-scrollbar-button：vertical：increment

请参阅 new fiddle （已更新2012年4月27日）。

Please see new fiddle (updated 27 Apr. 2012).

推荐答案

看起来这些句柄的css标签不会显示在Chrome的开发工具中。您必须检查示例的来源才能看到真正发生了什么。

It looks like the css tags for the handles don't show up in Chrome's dev tools. You have to examine the source of the sample to see what is really going on.

http://www.webkit.org/blog/363/styling-scrollbars/

这篇关于新版Google文档UI中的滚动条是如何风格化的（尤其是箭头按钮）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！