The scrollbar can be styled with CSS properties as required and essential features for the web page. We can add a scrollbar with different styles and designs according to user requirements and web page templates. We can add different colours, colours with transition and opacity, border colour, and border radius for the scroll bar. The scrollbar styling sets the horizontal or vertical scroll with the required design on the web page.
Examples
The following examples show the scrollbar with different styles, colours and shapes. We can use various CSS properties to add style to the scrollbar.
Example 1:
The example demonstrates the standard, default, and vibrant scrollbar with border-radius. Various colors and dimensions can be incorporated into the scrollbar design.
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS Scrollbar Styling </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height : 330px;
width: 350px;
border : 2px solid black;
padding-left: 1%;
padding-right: 1%;
}
header
{
font-family: 'Lobster', cursive;
text-align: center;
font-size: 25px;
}
.scrollbar
{
margin-left: 10px;
float: left;
height: 250px;
width: 70px;
background: lightgrey;
overflow-y: scroll;
margin-bottom: 25px;
}
.scroll-overflow
{
min-height: 320px;
}
#wrap_cont
{
text-align: center;
width: 300px;
margin: auto;
}
/*
first scrollbar styling
*/
#style_bar-1::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 5px;
background-color: grey;
}
#style_bar-1::-webkit-scrollbar
{
width: 12px;
background-color: grey;
}
#style_bar-1::-webkit-scrollbar-thumb
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.3);
background-color: yellow;
}
/*
second scrollbar styling
*/
#style_bar-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F6F6F5;
}
#style_bar-2::-webkit-scrollbar
{
width: 12px;
background-color: #F6F6F5;
}
#style_bar-2::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.3);
background-color: blue;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS Scrollbar Styling
</h3>
<div id = "wrap_cont">
<div class = "scrollbar" id="scroll-default">
<div class = "scroll-overflow"> CSS Style 1 </div>
</div>
<div class = "scrollbar" id = "style_bar-1">
<div class = "scroll-overflow"> CSS Style 2 </div>
</div>
<div class = "scrollbar" id = "style_bar-2">
<div class = "scroll-overflow"> CSS Style 3 </div>
</div>
</div>
</div>
</body>
</html>
Output:
The result displays the CSS scrollbar along with its styling.
Example 2
The demonstration displays the vibrant scrollbar with and without a border. Users have the option to customize the scrollbar with various colors and sizes, as well as different border sizes.
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS Scrollbar Styling </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height : 330px;
width: 350px;
border : 2px solid black;
padding-left: 1%;
padding-right: 1%;
}
header
{
font-family: 'Lobster', cursive;
text-align: center;
font-size: 25px;
}
.scrollbar
{
margin-left: 10px;
float: left;
height: 250px;
width: 70px;
background: lightgrey;
overflow-y: scroll;
margin-bottom: 25px;
}
.scroll-overflow
{
min-height: 320px;
}
#wrap_cont
{
text-align: center;
width: 300px;
margin: auto;
}
/*
first scrollbar styling
*/
#style_bar-1::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: lightgrey;
border: 1px solid black;
}
#style_bar-1::-webkit-scrollbar
{
width: 8px;
background-color: lightgrey;
}
#style_bar-1::-webkit-scrollbar-thumb
{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.3);
background-color: black;
}
/*
second scrollbar styling
*/
#style_bar-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F6F6F5;
}
#style_bar-2::-webkit-scrollbar
{
width: 8px;
background-color: #F6F6F5;
}
#style_bar-2::-webkit-scrollbar-thumb
{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.3);
background-color: navy;
border: 2px solid orange;
}
/*
third scrollbar styling
*/
#style_bar-3::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F6F6F5;
}
#style_bar-3::-webkit-scrollbar
{
width: 6px;
background-color: #F6F6F5;
}
#style_bar-3::-webkit-scrollbar-thumb
{
background-color: red;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS Scrollbar Styling
</h3>
<div id = "wrap_cont">
<div class = "scrollbar" id = "style_bar-1">
<div class = "scroll-overflow"> CSS Style 1 </div>
</div>
<div class = "scrollbar" id = "style_bar-2">
<div class = "scroll-overflow"> CSS Style 2 </div>
</div>
<div class = "scrollbar" id = "style_bar-3">
<div class = "scroll-overflow"> CSS Style 3 </div>
</div>
</div>
</div>
</body>
</html>
Output:
The result displays the CSS scrollbar along with its style.
Example 3:
The illustration demonstrates either identical colors with varied transitions or diverse colors with color transitions within a single scrollbar. This showcases two scrollbars featuring color combinations and styles tailored to the webpage.
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS Scrollbar Styling </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height : 330px;
width: 350px;
border : 2px solid black;
padding-left: 1%;
padding-right: 1%;
}
header
{
font-family: 'Lobster', cursive;
text-align: center;
font-size: 25px;
}
.scrollbar
{
margin-left: 10px;
float: left;
height: 250px;
width: 70px;
background: lightgrey;
overflow-y: scroll;
margin-bottom: 25px;
}
.scroll-overflow
{
min-height: 320px;
}
#wrap_cont
{
text-align: center;
width: 300px;
margin: auto;
}
/*
first scrollbar styling
*/
#style_bar-1::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style_bar-1::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style_bar-1::-webkit-scrollbar-thumb
{
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%,
color-stop(.4, rgba(205, 205, 205, .8)),
color-stop(.8, transparent), to(transparent));
}
/*
second scrollbar styling
*/
#style_bar-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style_bar-2::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style_bar-2::-webkit-scrollbar-thumb
{
background-color: #F90;
background-image: -webkit-linear-gradient(45deg,
rgba(155, 155, 155, .4) 25%,
transparent 15%,
transparent 50%,
rgba(155, 155, 155, .8) 50%,
rgba(255, 255, 255, .5) 75%,
transparent 90%,
transparent)
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS Scrollbar Styling
</h3>
<div id = "wrap_cont">
<div class = "scrollbar" id = "style_bar-1">
<div class = "scroll-overflow"> CSS Style 1 </div>
</div>
<div class = "scrollbar" id = "style_bar-2">
<div class = "scroll-overflow"> CSS Style 2 </div>
</div>
</div>
</div>
</body>
</html>
Output:
The result displays the CSS scrollbar along with its styling.
Example 4:
The illustration demonstrates two different shades with varying levels of transparency within a single scrollbar. Adjusting the opacity can alter the color of the style tag and introduce a smooth transition effect for the scrollbar. Additionally, it is possible to include borders and border radii for both the scrollbar and scroll track.
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS Scrollbar Styling </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height : 330px;
width: 350px;
border : 2px solid black;
padding-left: 1%;
padding-right: 1%;
}
header
{
font-family: 'Lobster', cursive;
text-align: center;
font-size: 25px;
}
.scrollbar
{
margin-left: 10px;
float: left;
height: 250px;
width: 70px;
background: lightgrey;
overflow-y: scroll;
margin-bottom: 25px;
}
.scroll-overflow
{
min-height: 320px;
}
#wrap_cont
{
text-align: center;
width: 300px;
margin: auto;
}
/*
first scrollbar styling
*/
#style_bar-1::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: lightgrey;
border-radius: 10px;
border : 2px solid black;
}
#style_bar-1::-webkit-scrollbar
{
width: 10px;
background-color: lightgrey;
border-radius: 10px;
}
#style_bar-1::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: black;
background-image: -webkit-linear-gradient(90deg,
rgba(255, 255, 255, .6) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .6) 50%,
rgba(255, 255, 255, .6) 75%,
transparent 75%,
transparent)
}
/*
second scrollbar styling
*/
#style_bar-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: lightgrey;
}
#style_bar-2::-webkit-scrollbar
{
width: 12px;
background-color: lightgrey;
}
#style_bar-2::-webkit-scrollbar-thumb
{
background-color: red;
background-image: -webkit-linear-gradient(90deg,
rgba(255, 255, 255, .6) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .6) 50%,
rgba(255, 255, 255, .6) 75%,
transparent 75%,
transparent)
}
/*
third scrollbar styling
*/
#style_bar-3::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
#style_bar-3::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style_bar-3::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-image: -webkit-gradient(linear,
left top,
left bottom,
color-stop(0.45, rgb(122,153,217)),
color-stop(0.75, rgb(73,125,189)),
color-stop(0.96, rgb(128,58,148)));
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS Scrollbar Styling
</h3>
<div id = "wrap_cont">
<div class = "scrollbar" id = "style_bar-1">
<div class = "scroll-overflow"> CSS Style 1 </div>
</div>
<div class = "scrollbar" id = "style_bar-2">
<div class = "scroll-overflow"> CSS Style 2 </div>
</div>
<div class = "scrollbar" id = "style_bar-3">
<div class = "scroll-overflow"> CSS Style 3 </div>
</div>
</div>
</div>
</body>
</html>
Output:
The result displays the CSS scrollbar along with its styling.
Example 5:
The illustration highlights the visually appealing and distinctive design of the scrollbar. The initial scrollbar features a dual-line design incorporating a border and radius in matching colors. In contrast, the subsequent scrollbar showcases a central color, with the top and bottom colors being identical.
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS Scrollbar Styling </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height : 330px;
width: 350px;
border : 2px solid black;
padding-left: 1%;
padding-right: 1%;
}
header
{
font-family: 'Lobster', cursive;
text-align: center;
font-size: 25px;
}
.scrollbar
{
margin-left: 10px;
float: left;
height: 250px;
width: 70px;
background: lightgrey;
overflow-y: scroll;
margin-bottom: 25px;
}
.scroll-overflow
{
min-height: 320px;
}
#wrap_cont
{
text-align: center;
width: 300px;
margin: auto;
}
/*
first scrollbar styling
*/
#style_bar-1::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: lightgrey;
border-radius: 10px;
}
#style_bar-1::-webkit-scrollbar
{
width: 10px;
background-color: lightgrey;
}
#style_bar-1::-webkit-scrollbar-thumb
{
background-color: maroon;
border-radius: 10px;
background-image: -webkit-linear-gradient(0deg,
rgba(255, 255, 255, 0.5) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0.5) 75%,
transparent 75%,
transparent)
}
/*
second scrollbar styling
*/
#style_bar-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
background-color: lightgrey;
}
#style_bar-2::-webkit-scrollbar
{
width: 12px;
background-color: lightgrey;
}
#style_bar-2::-webkit-scrollbar-thumb
{
background-color: orange;
background-image: -webkit-linear-gradient(90deg,
transparent,
rgba(0, 0, 0, 0.5) 50%,
transparent,
transparent)
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS Scrollbar Styling
</h3>
<div id = "wrap_cont">
<div class = "scrollbar" id = "style_bar-1">
<div class = "scroll-overflow"> CSS Style 1 </div>
</div>
<div class = "scrollbar" id = "style_bar-2">
<div class = "scroll-overflow"> CSS Style 2 </div>
</div>
</div>
</div>
</body>
</html>
Output:
The result displays the CSS scrollbar along with its styling.
Example 6:
The illustration demonstrates the appearance of a vertical scrollbar within a web page through CSS styling. This scrollbar is specifically designed to be displayed vertically on the webpage by utilizing various CSS properties. By employing the CSS styling tag, it is possible to conceal the horizontal scrollbar while ensuring that only the vertical scrollbar is visible on the webpage.
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS Scrollbar Styling </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height : 330px;
width: 350px;
border : 2px solid black;
padding-left: 1%;
padding-right: 1%;
}
header
{
font-family: 'Lobster', cursive;
text-align: center;
font-size: 25px;
}
.scrollbar
{
margin-left: 10px;
float: left;
height: 250px;
width: 85px;
background: lightgrey;
overflow-x: scroll;
overflow-y: hidden;
margin-bottom: 25px;
}
.scroll-overflow
{
min-height: 320px;
}
#wrap_cont
{
text-align: center;
width: 300px;
margin: auto;
}
/*
second scrollbar styling
*/
#style_bar-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style_bar-2::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style_bar-2::-webkit-scrollbar-thumb
{
background-color: #F90;
background-image: -webkit-linear-gradient(45deg,
rgba(155, 155, 155, .4) 25%,
transparent 15%,
transparent 50%,
rgba(155, 155, 155, .8) 50%,
rgba(255, 255, 255, .5) 75%,
transparent 90%,
transparent)
}
/*
third scrollbar styling
*/
#style_bar-3::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
background-color: #F5F5F5;
border-radius: 10px;
}
#style_bar-3::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style_bar-3::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #FFF;
background-image: -webkit-linear-gradient(top,
#e4f5fc 0%,
#bfe8f9 50%,
#9fd8ef 51%,
#2ab0ed 100%);
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS Vertical Scrollbar Styling
</h3>
<div id = "wrap_cont">
<div class = "scrollbar" id = "style_bar-2">
<div class = "scroll-overflow"> CSS JavaWebsite Style 1 </div>
</div>
<div class = "scrollbar" id = "style_bar-3">
<div class = "scroll-overflow"> CSS JavaWebsite Style 2 </div>
</div>
</div>
</div>
</body>
</html>
Output:
The result demonstrates the CSS vertical scrollbar appearance and its customization.
Example 7
The demonstration illustrates the appearance of horizontal and vertical scrollbars on a webpage through CSS styling. Both scrollbars are customized using CSS properties to have a consistent look.
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS Scrollbar Styling </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height : 330px;
width: 350px;
border : 2px solid black;
padding-left: 1%;
padding-right: 1%;
}
header
{
font-family: 'Lobster', cursive;
text-align: center;
font-size: 25px;
}
.scrollbar
{
margin-left: 10px;
float: left;
height: 250px;
width: 85px;
background: lightgrey;
overflow-y: scroll;
margin-bottom: 25px;
}
.scroll-overflow
{
min-height: 320px;
}
#wrap_cont
{
text-align: center;
width: 300px;
margin: auto;
}
/*
first scrollbar styling
*/
#style_bar-1::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 5px;
background-color: grey;
}
#style_bar-1::-webkit-scrollbar
{
width: 12px;
background-color: grey;
}
#style_bar-1::-webkit-scrollbar-thumb
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.3);
background-color: yellow;
}
/*
second scrollbar styling
*/
#style_bar-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
background-color: lightgrey;
}
#style_bar-2::-webkit-scrollbar
{
width: 12px;
background-color: lightgrey;
}
#style_bar-2::-webkit-scrollbar-thumb
{
background-color: orange;
background-image: -webkit-linear-gradient(90deg,
transparent,
rgba(0, 0, 0, 0.5) 50%,
transparent,
transparent)
}
/*
third scrollbar styling
*/
#style_bar-3::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F6F6F5;
border : 1px solid red;
}
#style_bar-3::-webkit-scrollbar
{
width: 8px;
background-color: #F6F6F5;
}
#style_bar-3::-webkit-scrollbar-thumb
{
background-color: red;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
CSS Scrollbar Styling
</h3>
<div id = "wrap_cont">
<div class = "scrollbar" id="style_bar-1">
<div class = "scroll-overflow"> CSS JavaWebsite Style 1 </div>
</div>
<div class = "scrollbar" id = "style_bar-2">
<div class = "scroll-overflow"> CSS JavaWebsite Style 2 </div>
</div>
<div class = "scrollbar" id = "style_bar-3">
<div class = "scroll-overflow"> CSS JavaWebsite Style 3 </div>
</div>
</div>
</div>
</body>
</html>
Output:
The result displays the CSS scrollbar along with its styling.
Conclusion
The styling of CSS scrollbars enhances the appearance of the scrolling feature within a container. It allows customization of colors, transitions, borders, and radii to align with the overall design scheme of the webpage.