We use the scrollbar daily while using the web. Scrollbars are tools with the help of which we can scroll the content of our webpage. The problem with the default scrollbars is that they always appear in the same dull gray color. But then how to make them look good? In this article, we will learn how to make a scrollbar look good.
What are the components of a scrollbar? Before learning about how to style a scrollbar. first, we should learn the various components of it. A scrollbar mainly consists of the following components:
- The scroll bar itself
- The top or right arrow button
- The bottom or left arrow button
- The scroll box (thumb)
- The page up or page right region
- The page down or page left region
Scroll Bar
How to style the scrollbar? Chrome, Edge, Safari, and Opera support the non-standard ::-webkit-scrollbar pseudo-element, which helps us to change the look of the browser’s scrollbar.
::webkit-scrollbar-{component}The component is that part of the scrollbar which we want to style. The various components are already described above.
Example 1: In this example, we will create a scrollbar filled with green color.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Scroll Bar</title>
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color: #eeeeee">
<h1 style="text-align: center; color: green;">
GeeksforGeeks
</h1>
<h1 style="text-align: center; color: orange;">
How to style a scrollbar?
</h1>
</body>
</html>
|
::-webkit-scrollbar { width: 15px;
background-color: green;
} |
Output: This will fill our scrollbar with green color:
Example 2: Now, let’s make it look better. Now, let’s style the thumb, track, and scroll buttons:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Scroll Bar</title>
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color: #eeeeee">
<h1 style="text-align: center; color: green;">
GeeksforGeeks
</h1>
<h1 style="text-align: center; color: orange;">
How to style a scrollbar?
</h1>
</body>
</html>
|
::-webkit-scrollbar { width: 15px;
}::-webkit-scrollbar-track { background-color: #444444;
}::-webkit-scrollbar-button { background-color: orange;
}::-webkit-scrollbar-thumb { background: linear-gradient(180deg, pink, blue);
} |
Output:
Output