Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How are scrollbars in new Google Docs UI styled (esp. the arrow buttons)?

Tags:

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).

like image 507
Anton Strogonoff Avatar asked Oct 12 '11 15:10

Anton Strogonoff


1 Answers

Hope this can help you:

::-webkit-scrollbar {     height: 12px;     width: 12px;     background: #ebebeb;     overflow: visible; } ::-webkit-scrollbar-corner {     display: none;     background: #f5f5f5; }  ::-webkit-scrollbar-button {     display: none;     height:0;     width: 0; }  ::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment             {     display: block; }  ::-webkit-scrollbar-button:vertical:start:increment,::-webkit-scrollbar-button:vertical:end:decrement {     display: none; }  ::-webkit-scrollbar-track {     -moz-background-clip: border;     -webkit-background-clip: border;     background-clip: padding-box;     background-color: #f5f5f5; }  ::-webkit-scrollbar-track:vertical, ::-webkit-scrollbar-track:horizontal {     border-left-width: 0;     border-right-width: 0; }  ::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal,::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal {     border-style: solid;     border-color: transparent; }  ::-webkit-scrollbar-thumb {     -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);     background-clip: padding-box;     background-color: rgba(0,0,0,.2);     min-height: 28px;     padding-top: 100px; }  ::-webkit-scrollbar-thumb:hover {     -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,.25);     background-color: rgba(0,0,0,.4); }  ::-webkit-scrollbar-thumb:active {     -webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,.35);     background-color: rgba(0,0,0,.5); }  ::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {     border-width: 0;     border-left-width: 0;     border-right-width: 0; } 
like image 141
GaminGrounds Avatar answered Sep 23 '22 13:09

GaminGrounds