Updated June 23, 2023
Introduction to CSS Scrollbar
Scroll the HTML elements. We have custom scrollbars in CSS. These scrollbars are used to provide different scrolling styles, and it makes the websites look and feel interesting. To work with CSS custom scroll bars, we need some jQuery plugins; this will help customize scrollbars. We have the facility to design custom scrollbars with JavaScript libraries also. But JavaScript libraries make the application heavyweight, and it declines the performance. So better to use jQuery plugins. To design custom scrollbars, we need Webkit rendering engine in the browser. We have to add the type of scrollbar type as a suffix to the -webkit prefix.
Note: Browsers like Internet Explorer, Firefox, Chrome, etc., automatically give custom jQuery plugins.
Scrollbars in CSS are used with the -webkit prefix. Add the required scroll bar style as the suffix to the -webkit selector.
Types of CSS Scrollbar
Below are the types are as follows:
- scrollbars
- scrollbar-button
- scrollbar-track
- scrollbar-track-piece
- scrollbar-thumb
- scrollbar-corner
- scrollbar-resizer
1) ::-webkit-scrollbar
It gives a normal scrollbar.
Syntax:
::-webkit-scrollbar
{
/* 1. CSS Styles*/
}2) ::-webkit-scrollbar-button
It gives buttons on the scroll bar, like the up and down arrow buttons.
Syntax:
::-webkit-scrollbar-button </strong
{
/* 2. CSS Styles*/
}3) ::-webkit-scrollbar-track
It gives the scrollbar like a progress bar.
Syntax:
::-webkit-scrollbar-track
{
/* 3. CSS Styles*/
}4) ::-webkit-scrollbar-track-piece
It gives a scrollbar-like progress bar but does not cover by the handle.
Syntax:
::-webkit-scrollbar-track-piece
{
/* 4. CSS Styles*/
}5) ::-webkit-scrollbar-thumb
It gives the draggable scrollbar handle.
Syntax:
::-webkit-scrollbar-thumb
{
/* 5. CSS Styles*/
}6) ::-webkit-scrollbar-corner
It gives effect at the bottom corner of the scrollable element where horizontal and vertical scrollbars meet.
Syntax:
::-webkit-scrollbar-corner
{
/* 6. CSS Styles*/
}7) ::-webkit-resizer
It gives effect at the draggable resizing that appeared just above the scroll bar corner at the bottom corner of some elements.
Syntax:
::-webkit-resizer
{
/* 7. CSS Styles */
}All Scrollbars in Image:
Examples to Implement CSS Scrollbar
Below are the examples:
Example #1
Scrollbar with scroll property.
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.scroller {
width: 400px;
height: 400px;
overflow-y: scroll; /*when overflows scroll bar adds in vertical direction*/
}
p
{
color: brown;
font-size: 24px;
}
</style>
</head>
<body>
<div class="scroller">
<p>Scroll the HTML elements we have custom scrollbars in CSS. This scrollbars are used to provide different scrolling styles and it makes the websites look and feel interesting. Work with CSS custom scroll bars we need some jQuery plugins this will help for customizing scrollbars. We have facility to design custom scrollbars with JavaScript libraries also. But JavaScript libraries makes the application heavy weight and it declines the performance. So better to use jQuery plugins. Design custom scrollbars we need Webkit rendering engine in the browser. We have to add type of scrollbar type as suffix to the -webkit prefix.</p>
<p>Scroll the HTML elements we have custom scrollbars in CSS. This scrollbars are used to provide different scrolling styles and it makes the websites look and feel interesting. Work with CSS custom scroll bars we need some jQuery plugins this will help for customizing scrollbars. We have facility to design custom scrollbars with JavaScript libraries also. But JavaScript libraries makes the application heavy weight and it declines the performance. So better to use jQuery plugins. Design custom scrollbars we need Webkit rendering engine in the browser. We have to add type of scrollbar type as suffix to the -webkit prefix.</p>
</div>
</body>
</html>Output:
Example #2
Webkit prefix with scrollbar, scrollbar-track, and scrollbar-thumb Example:
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
background: lightgreen;
height: 100%;
overflow: hidden;
}
body {
height: 100%;
background: lightblue;
max-width: 500px;
max-height: 500px;
overflow: scroll;
width: 80%;
margin: 0 auto;
padding: 30px;
font: 100%/1.8 serif;
border: 1px solid rgba(0,0,0,0.4);
}
p {
margin: 0 0 20px;
}
body::-webkit-scrollbar {
width: 22px;/*Gives you width to the scrollbar*/
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4);/*Gives styles to the scrollbar*/
}
body::-webkit-scrollbar-thumb {
background-color: red;/*Gives background color to the scrollbar*/
outline: 1px solid blue;
}
</style>
</head>
<body>
<div class="scroller">
<p>Scroll the HTML elements we have custom scrollbars in CSS. This scrollbars are used to provide different scrolling styles and it makes the websites look and feel interesting. Work with CSS custom scroll bars we need some jQuery plugins this will help for customizing scrollbars. We have facility to design custom scrollbars with JavaScript libraries also. But JavaScript libraries makes the application heavy weight and it declines the performance. So better to use jQuery plugins. Design custom scrollbars we need Webkit rendering engine in the browser. We have to add type of scrollbar type as suffix to the -webkit prefix.</p>
<p>Scroll the HTML elements we have custom scrollbars in CSS. This scrollbars are used to provide different scrolling styles and it makes the websites look and feel interesting. Work with CSS custom scroll bars we need some jQuery plugins this will help for customizing scrollbars. We have facility to design custom scrollbars with JavaScript libraries also. But JavaScript libraries makes the application heavy weight and it declines the performance. So better to use jQuery plugins. Design custom scrollbars we need Webkit rendering engine in the browser. We have to add type of scrollbar type as suffix to the -webkit prefix.</p>
<p>Scroll the HTML elements we have custom scrollbars in CSS. This scrollbars are used to provide different scrolling styles and it makes the websites look and feel interesting. Work with CSS custom scroll bars we need some jQuery plugins this will help for customizing scrollbars. We have facility to design custom scrollbars with JavaScript libraries also. But JavaScript libraries makes the application heavy weight and it declines the performance. So better to use jQuery plugins. Design custom scrollbars we need Webkit rendering engine in the browser. We have to add type of scrollbar type as suffix to the -webkit prefix.</p>
</div>
</body>
</html>Output:
Example #3
Different scrollbars.
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.scrollbar
{
margin-left: 30px;
float: left;
margin-bottom: 25px;
height: 350px;
background: #F5F5F5;
overflow-y: scroll;
width: 60px;
}
.addScrollStyle
{
min-height: 450px;
}
#wrapper
{
text-align: center;
width: 500px;
margin: auto;
}
/*scroll bar style 1*/
#scrollbar-1::-webkit-scrollbar-track
{
border-radius: 12px;
background-color: lightgray;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
#scrollbar-1::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#scrollbar-1::-webkit-scrollbar-thumb
{
border-radius: 12px;
background-color: red;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
}
/*scroll bar style 2*/
#scrollbar-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 12px;
background-color: lightgray;
}
#scrollbar-2::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#scrollbar-2::-webkit-scrollbar-thumb
{
border-radius: 12px;
background-color: blue;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
}
/*scroll bar style 3*/
#scrollbar-3::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: lightgray;
}
#scrollbar-3::-webkit-scrollbar
{
width: 6px;
background-color: #F5F5F5;
}</strong
#scrollbar-3::-webkit-scrollbar-thumb
{
background-color: purple;
}
/*scroll bar style 4*/
#scrollbar-4::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: lightgray;
}
#scrollbar-4::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#scrollbar-4::-webkit-scrollbar-thumb
{
background-color: green;
border: 2px solid pink;
}
/*scroll bar style 5*/
#scrollbar-5::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: lightgray;
}
#scrollbar-5::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#scrollbar-5::-webkit-scrollbar-thumb
{
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%,
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.5, transparent), to(transparent));
}
/*scroll bar style 6*/
#scrollbar-6::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: lightgray;
}
#scrollbar-6::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#scrollbar-6::-webkit-scrollbar-thumb
{
background-color: fuchsia;
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
/*scroll bar style 7*/
#scrollbar-7::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: lightgray;
border-radius: 12px;
}
#scrollbar-7::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#scrollbar-7::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-image: -webkit-gradient(linear,
left bottom,
left top,
color-stop(0.44, rgb(122,153,217)),
color-stop(0.72, rgb(73,125,189)),
color-stop(0.86, rgb(28,58,148)));
}
/*scroll bar style 8*/
#scrollbar-8::-webkit-scrollbar-track
{
border: 1px solid blue;
background-color: lightgray;
}
#scrollbar-8::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#scrollbar-8::-webkit-scrollbar-thumb
{
background-color: purple;
}
/*scroll bar style 9*/
#scrollbar-9::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: lightgray;
}
#scrollbar-9::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#scrollbar-9::-webkit-scrollbar-thumb
{
background-color: maroon;
background-image: -webkit-linear-gradient(90deg,= rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
</style>
</head>
<body>
<div id="wrapper">
<div class="scrollbar" id="scrollbar-1">
<div class="addScrollStyle"></div>
</div>
<div class="scrollbar" id="scrollbar-2">
<div class="addScrollStyle"></div>
</div>
<div class="scrollbar" id="scrollbar-3">
<div class="addScrollStyle"></div>
</div>
<div class="scrollbar" id="scrollbar-4">
<div class="addScrollStyle"></div>
</div>
<div class="scrollbar" id="scrollbar-5">
<div class="addScrollStyle"></div>
</div>
<div class="scrollbar" id="scrollbar-6">
<div class="addScrollStyle"></div>
</div>
<div class="scrollbar" id="scrollbar-7">
<div class="addScrollStyle"></div>
</div>
<div class="scrollbar" id="scrollbar-8">
<div class="addScrollStyle"></div>
</div>
<div class="scrollbar" id="scrollbar-9">
<div class="addScrollStyle"></div>
</div>
</div>
</body>
</html>Output:
Conclusion
Scrollbars in CSS are used with webkit as a prefix and scrollbar type as a suffix, resulting in different types of scroll bars. We can also take a scroll bar in the vertical and horizontal direction by using overflow-y and overflow-x with scroll values, respectively.
Recommended Articles
We hope this EDUCBA information on the “CSS Scrollbar” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
