scrollbar
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
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 typ e 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>
</body>
</html>
Example of the scrollbar property with the ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb pseudo-elements:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
height: 100%;
overflow: hidden;
}
body {
height: 100%;
background: #ececec;
overflow: scroll;
width: 90%;
max-width: 550px;
margin: 0 auto;
padding: 2em;
border: 2px solid #cccccc;
}
p {
margin: 0 0 1.5em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
body::-webkit-scrollbar {
width: 5px;
background-color: #F5F5F5;
}
body::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #666666;
}
</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>
</body>
</html>
Values
Values
| Value | Description |
|---|---|
| ::-webkit-scrollbar-button | The buttons on the scrollbar. |
| ::-webkit-scrollbar-track | The part of the track not covered by the handle. |
| ::-webkit-scrollbar-track-piece | The track of the scrollbar. |
| ::-webkit-scrollbar-thumb | The draggable scrolling 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. |
Example of a vertical side bar:
Example of a vertical side bar:
Here’s an example of how to create a vertical sidebar in HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<style>
/* Style for the sidebar container */
.sidebar {
height: 40%; /* Set the height of the sidebar to fill 40 % of the screen */
width: 200px; /* Set the width of the sidebar */
position: fixed; /* Make the sidebar fixed */
top: 0; /* Position the sidebar at the top of the screen */
left: 0; /* Position the sidebar on the left side of the screen */
background-color: #c3c3c3; /* Set the background color of the sidebar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
/* Style for the links inside the sidebar */
.sidebar a {
display: block; /* Display links as block elements */
padding: 16px; /* Add some padding to the links */
color: #000; /* Set the color of the links */
text-decoration: none; /* Remove underline from links */
}
/* Add a hover effect to the links */
.sidebar a:hover {
background-color: #ddd;
}
/* Style for the main content area */
.main-content {
margin-left: 200px; /* Set the left margin to the width of the sidebar */
padding: 20px; /* Add some padding to the main content */
}
</style>
<body>
<div class="sidebar">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
<div class="main-content">
<!-- Your main content here -->
</div>
</body>
</html>
In this example, we have created a sidebar container with a fixed position on the left side of the screen. We have set the width and height of the sidebar container, as well as the background color and overflow property to hide the horizontal scrollbar. Inside the sidebar container, we have added links that are styled as block elements and have a hover effect when the mouse is over them.
The main content area is positioned to the right of the sidebar by setting the left margin to the width of the sidebar. This ensures that the main content does not overlap with the sidebar.