CSS scrollbar Property
The scrollbar set of CSS properties is a proprietary style hook letting designers create custom themes for the browser's native scrollbars.
Now, it is exposed behind the -webkit vendor prefix.
The -webkit-scrollbar set of properties consists of seven different pseudo-elements that, together, comprise a full scrollbar UI element. These seven pseudo-elements are the following:
- ::-webkit-scrollbar
- ::-webkit-scrollbar-button
- ::-webkit-scrollbar-track
- ::-webkit-scrollbar-track-piece
- ::-webkit-scrollbar-thumb
- ::-webkit-scrollbar-corner
- ::-webkit-resizer
Initial Value | auto |
Applies to | Scrolling boxes. |
Inherited | Yes. |
Animatable | Discrete. |
Version | - |
DOM Syntax | - |
Syntax
scrollbar: ::-webkit-scrollbar-button | ::-webkit-scrollbar-track | ::-webkit-scrollbar-track-piece | ::-webkit-scrollbar-thumb | ::-webkit-scrollbar-corner | ::-webkit-resizer
Example of the scrollbar property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
height: 100%;
overflow: hidden;
}
body {
height: 100%;
background: #eee;
overflow: scroll;
width: 85%;
max-width: 600px;
margin: 0 auto;
padding: 3em;
font: 100%/1.4 lora, serif;
border: 1px solid #666;
}
p {
margin: 0 0 1.5em;
}
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
background-color: #666;
outline: 1px solid #eee;
}
</style>
</head>
<body>
<h2>Scrollbar property example</h2>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
</div>
</body>
</html>
Values
Value | Description |
---|---|
::-webkit-scrollbar-button | The buttons on the scrollbar. |
::-webkit-scrollbar-track | The draggable scrolling handle. |
::-webkit-scrollbar-track-piece | The track of the scrollbar. |
::-webkit-scrollbar-thumb | The part of the track not covered by the handle. |
::-webkit-scrollbar-corner | The bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet. |
::-webkit-resizer | The draggable resizing handle that appears at the bottom corner of some elements. |
initial | Makes the property use its default value. |
inherit | Inherits the property from its parents element. |
Browser support
|
|
|
|
|
---|---|---|---|---|
4.0 -webkit- (Partial) | x | 64.0 (Partial) | 5.1 -webkit- (Partial) | 15.0 -webkit- (Partial) |