Home/ Questions/Q 6673927
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T03:41:09+00:00

The new Google Docs UI features cool gray scrollbars. These appear to be regular

  • 0

The new Google Docs UI features cool gray scrollbars.

Screenshot of the Google Docs UI

These appear to be regular scrollbars styled with selectors like ::-webkit-scrollbar-thumb. Which is nice and accessible.

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?

Please check out this fiddle.

Edit:

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

In particular, you’d need ::-webkit-scrollbar-button:vertical:decrement and ::-webkit-scrollbar-button:vertical:increment, and their horizontal equivalents.

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0