EDUCBA

Home » Software Development » Software Development Tutorials » CSS Tutorial » CSS Scrollbar

CSS Scrollbar

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.

Note: Custom jQuery plugins are automatically given by browsers like Internet Explorer, Firefox, Chrome, etc.

Scrollbars in CSS are used with -webkit prefix. Add the required scroll bar style as the suffix to the -webkit selector.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Types of CSS Scrollbar

Below are the types are as follows:

  1. scrollbars
  2. scrollbar-button
  3. scrollbar-track
  4. scrollbar-track-piece
  5. scrollbar-thumb
  6. scrollbar-corner
  7. 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.

Bootstrap Training (2 Courses, 6+ Projects)

4.9

jQuery Training (8 Courses, 5 Projects)

4.8

Syntax:

::-webkit-resizer
{
/* 7. CSS Styles */
}

All Scrollbars in Image:

All Scrollbars

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:

property Example 1

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:

CSS Scrollbar - 2

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:

 webkit Box Example 3

Webkit Box Example 3

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 of Scrollbar in CSS and its different examples along with its code implementation. You can also go through our other suggested articles to learn more –

  1. CSS Letter Spacing
  2. CSS tricks
  3. CSS line height
  4. CSS transform
0 Shares
Share
Tweet
Share
quiz