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. Work with CSS custom scroll bars we need some jQuery plugins, this will help for customizing scrollbars. We have the facility to design custom scrollbars with JavaScript libraries also. But JavaScript libraries makes the application heavyweight 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 the type of scrollbar type as a suffix to the -webkit prefix.
How to Use Scrollbar in CSS?
Scrollbars in CSS are used with -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 normal scrollbar.
Syntax:
::-webkit-scrollbar
{
/* 1. CSS Styles*/
}
2) ::-webkit-scrollbar-button: It gives buttons on the scroll bar like the up arrow and down arrow button.
Syntax:
::-webkit-scrollbar-button </strong
{
/* 2. CSS Styles*/
}
3) ::-webkit-scrollbar-track: It gives the scrollbar like progress bar.
Syntax:
::-webkit-scrollbar-track
{
/* 3. CSS Styles*/
}
4) ::-webkit-scrollbar-track-piece: It gives scrollbar like progress bar but it does not covered 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.
4.5 (4,332 ratings)
View Course
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 prefix and scrollbar type as suffix will result 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 value respectively.
Recommended Articles
This is a guide to CSS Scrollbar. Here we discuss a brief overview on Scrollbar in CSS and its different examples along with its code implementation. You can also go through our other suggested articles to learn more –
