Draft
This page is not complete.
Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
Description
The ::-webkit-scrollbar CSS pseudo-element affects the style of the scrollbar of an element.
::-webkit-scrollbar
is only available in WebKit-based browsers (e.g., Google Chrome).
Syntax
::-webkit-scrollbar { styles here }
Example
.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar { display: block; width: 10em; overflow: auto; height: 2em; } .invisible-scrollbar::-webkit-scrollbar { display: none; } /* Demonstrate a "mostly customized" scrollbar * (won't be visible otherwise if width/height is specified) */ .mostly-customized-scrollbar::-webkit-scrollbar { width: 5px; height: 8px; background-color: #aaa; /* or add it to the track */ } /* Add a thumb */ .mostly-customized-scrollbar::-webkit-scrollbar-thumb { background: #000; }
<div class="visible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div> <div class="invisible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div> <div class="mostly-customized-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br> And pretty tall<br> thing with weird scrollbars.<br> Who thought scrollbars could be made weeeeird?</div>
See also
- WebKit blog on Styling Scrollbars
- WebKit test for scrollbar styles mentioned above
-ms-overflow-style