CSS实现一个自界说的滚动条

发表于 2025-11-18 22:12:39

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

要利用CSS创建一个自界说的滚动条，你可以利用伪元素和CSS的伪类来控制滚动条的外貌和举动。以下是一个简朴的例子，展示如作甚任何HTML元素添加一个自界说的滚动条样式：

[/code][code]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 容器样式，设置一个固定的高度 */
.custom-scrollbar {
width: 200px;
height: 200px;
overflow: auto; /* 触发滚动条 */
position: relative; /* 伪元素定位的基础 */
}
/* 滚动条轨道 */
.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1; /* 轨道颜色 */
}
/* 滚动条滑块 */
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #888; /* 滑块颜色 */
}
/* 滑块在悬停时的颜色 */
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #555; /* 悬停时颜色 */
}
</style>
</head>
<body>
<div class="custom-scrollbar">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p>...</p>
</div>
</body>
</html>

复制代码

在这个例子中，.custom-scrollbar 是一个带有 overflow: auto 属性的容器，它触发了滚动条的出现。::-webkit-scrollbar-track 和 ::-webkit-scrollbar-thumb 是两个伪元素，分别用于界说滚动条的轨道和滑块。::-webkit-scrollbar-thumb:hover 用于在滑块悬停时改变其颜色。
请注意，自界说滚动条现在仅在基于WebKit的欣赏器（如Chrome和Safari）中受支持。对于Firefox，你必要利用 -moz- 前缀，而在IE中，自界说滚动条则不被支持。
以下是对伪元素的扼要分析：

::-webkit-scrollbar-track：这是滚动条轨道的样式。
::-webkit-scrollbar-thumb：这是滚动条滑块的样式。
::-webkit-scrollbar-thumb:hover：这是滑块在鼠标悬停时的样式。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

CSS实现一个自界说的滚动条

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

浏览过的版块

十念