浏览器滚动条样式
1.Webkit浏览器支持使用伪元素来修改滚动条的样式
/* 设置滚动条的整体样式 */
::-webkit-scrollbar {
width: 12px; /* 滚动条的宽度 */
}
/* 设置滚动条轨道的样式 */
::-webkit-scrollbar-track {
background: #f1f1f1; /* 轨道背景颜色 */
}
/* 设置滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
background: #888; /* 滑块颜色 */
}
/* 当鼠标悬停在滚动条滑块上时的样式 */
::-webkit-scrollbar-thumb:hover {
background: #555; /* 悬停时滑块颜色 */
}
2.Firefox 支持通过 scrollbar-width 和 scrollbar-color 来控制滚动条的宽度和颜色：
/* 设置滚动条的宽度 */
scrollbar-width: thin; /* 或者 'auto' */
/* 设置滚动条的颜色 */
scrollbar-color: #888 #f1f1f1; /* 第一个值是滑块颜色，第二个值是轨道颜色
完整案列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Scrollbar Example</title>
<style>
.scrollable-div {
overflow-y: scroll; /* 显示垂直滚动条 */
height: 200px; /* 设置固定高度 */
scrollbar-width: thin; /* Firefox */
scrollbar-color: #888 #f1f1f1; /* Firefox */
}
/* Webkit 浏览器滚动条样式 */
.scrollable-div::-webkit-scrollbar {
width: 12px;
}
.scrollable-div::-webkit-scrollbar-track {
background: #f1f1f1;
}
.scrollable-div::-webkit-scrollbar-thumb {
background: #888;
}
.scrollable-div::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
</head>
<body>
<div class="scrollable-div">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, libero eget bibendum porta, nunc diam tincidunt leo, non pulvinar dui sem sed lectus. Nulla facilisi. Donec at lectus et eros fringilla aliquam. Suspendisse potenti. Nullam ut tellus a massa dapibus ullamcorper. Donec convallis, nisi nec fermentum mollis, orci nulla volutpat justo, at efficitur dui turpis in lectus. Proin quis faucibus tortor. Aenean ac felis id tellus dictum varius.</p>
<!-- 更多内容... -->
</div>
</body>
</html>
