CSS Scrollbar Styling

2025 年 1 月 22 日 | 阅读 9 分钟

可以使用 CSS 属性按需设置滚动条的样式，这是网页的重要功能。我们可以根据用户需求和网页模板添加不同样式和设计的滚动条。我们可以为滚动条添加不同的颜色、带过渡和不透明度的颜色、边框颜色和边框半径。滚动条样式可以根据网页所需的样式设置水平或垂直滚动条。

示例

以下示例展示了不同样式、颜色和形状的滚动条。我们可以使用各种 CSS 属性为滚动条添加样式。

示例 1

该示例展示了带有边框半径的基本、默认和多彩滚动条。我们可以为滚动条添加不同的颜色和尺寸。

<!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>

输出

输出显示了带有样式的 CSS 滚动条。

示例 2

该示例展示了带有边框和无边框的多彩滚动条。我们可以为滚动条添加不同的颜色和尺寸，以及不同的边框尺寸。

<!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>

输出

输出显示了带有样式的 CSS 滚动条。

示例 3

该示例展示了相同颜色带有不同过渡效果，或不同颜色带有颜色过渡的单个滚动条。在这里，我们可以看到两个带有颜色组合的滚动条，以及它们根据网页的样式。

<!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>

输出

输出显示了带有样式的 CSS 滚动条。

示例 4

该示例展示了单个滚动条中具有颜色不透明度的两种颜色。不透明度可以更改样式标签的颜色，并为滚动条添加过渡效果。我们可以为滚动条和滚动轨道添加边框和边框半径。

<!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>

输出

输出显示了带有样式的 CSS 滚动条。

示例 5

该示例展示了滚动条的吸引人和独特的设计。第一个滚动条显示了双线设计，边框和半径使用了相同的颜色。第二个滚动条显示了中心颜色，顶部和底部的颜色相同。

<!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>

输出

输出显示了带有样式的 CSS 滚动条。

示例 6

该示例展示了网页上的垂直滚动条及其 CSS 样式。网页上的垂直滚动条使用 CSS 属性进行样式设置。我们可以隐藏水平滚动条，仅显示带有 CSS 样式标签的垂直滚动条。

<!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 JavatpointWebsite Style 1 </div>
</div>
<div class = "scrollbar" id = "style_bar-3">
<div class = "scroll-overflow">  CSS JavatpointWebsite Style 2 </div>
</div>
</div>
</div>
</body>
</html>

输出

输出显示了 CSS 垂直滚动条样式及其设计。

示例 7

该示例展示了网页上的水平和垂直滚动条及其 CSS 样式。两个滚动条都使用 CSS 属性显示相同的样式。

<!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 JavatpointWebsite Style 1 </div>
</div>
<div class = "scrollbar" id = "style_bar-2">
<div class = "scroll-overflow"> CSS JavatpointWebsite Style 2 </div>
</div>
<div class = "scrollbar" id = "style_bar-3">
<div class = "scroll-overflow">  CSS JavatpointWebsite Style 3 </div>
</div>
</div>
</div>
</body>
</html>

输出

输出显示了带有样式的 CSS 滚动条。

结论

CSS 滚动条样式为容器的滚动条添加了样式。我们可以根据网页的主题添加不同的颜色、过渡、边框和半径。

下一个主题CSS 透明按钮

CSS Scrollbar Styling

示例

示例 1

示例 2

示例 3

示例 4

示例 5

示例 6

示例 7

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Scrollbar Styling

示例

示例 1

示例 2

示例 3

示例 4

示例 5

示例 6

示例 7

结论

相关帖子

Set the Divi Gutter Width with CSS

CSS Button Click Effect

CSS Rotate Text

CSS Codes List

CSS Curved Border

CSS Child Selector

Shorthand Property in CSS

CSS Not Selector

CSS Pull Right

CSS Invert

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器