重写滚动条的样式通常需要使用CSS来自定义其外观。现代浏览器（如Chrome、Firefox、Edge等）支持通过CSS的伪元素和特定的CSS属性来自定义滚动条。以下是一些示例代码，展示了如何重写滚动条的样式。
针对WebKit内核浏览器（如Chrome和Safari）
/* 滚动条整体宽度或高度 */
::-webkit-scrollbar {width: 12px; /* 垂直滚动条的宽度 */height: 12px; /* 水平滚动条的高度 */
}/* 滚动条轨道 */
::-webkit-scrollbar-track {background: #f1f1f1; /* 轨道颜色 */
}/* 滚动条滑块 */
::-webkit-scrollbar-thumb {background: #888; /* 滑块颜色 */border-radius: 6px; /* 滑块圆角 */
}/* 滑块在悬停时的颜色 */
::-webkit-scrollbar-thumb:hover {background: #555;
}/* 滚动条两端的按钮 */
::-webkit-scrollbar-button {background: #ddd; /* 按钮颜色 */height: 3px; /* 按钮高度 */
}/* 滚动条滑块两端的角落 */
::-webkit-scrollbar-corner {background: #f1f1f1; /* 角落颜色 */
}
针对Firefox（自版本64起支持）
Firefox使用不同的CSS属性来定制滚动条，但支持的属性较少。以下是一些可以自定义的样式：
/* 滚动条滑块颜色 */
scrollbar-color: #888 #f1f1f1; /* 滑块颜色 轨道颜色 *//* 滚动条宽度（仅对水平滚动条有效），高度同理 */
scrollbar-width: thin; /* 可选值：auto, thin, none */
完整示例
以下是一个完整的HTML和CSS示例，展示了如何自定义滚动条的样式：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Custom Scrollbar</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;overflow-x: hidden;}.content {width: 100%;height: 200vh; /* 使内容足够长以显示滚动条 */padding: 20px;box-sizing: border-box;}/* 针对WebKit内核浏览器 */::-webkit-scrollbar {width: 12px;height: 12px;}::-webkit-scrollbar-track {background: #f1f1f1;}::-webkit-scrollbar-thumb {background: #888;border-radius: 6px;}::-webkit-scrollbar-thumb:hover {background: #555;}::-webkit-scrollbar-button {background: #ddd;height: 3px;}::-webkit-scrollbar-corner {background: #f1f1f1;}/* 针对Firefox */body {scrollbar-color: #888 #f1f1f1;scrollbar-width: thin;}</style>
</head>
<body><div class="content"><h1>Scroll Down to See Custom Scrollbar</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quisque arcu diam veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magna aliqua. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><!-- 更多内容 --></div>
</body>
</html>这个示例展示了如何为WebKit内核的浏览器（如Chrome和Safari）和Firefox浏览器分别定制滚动条的样式。通过调整CSS属性，你可以根据自己的需求来进一步定制滚动条的外观。
![[linux]docker基础](https://img-blog.csdnimg.cn/img_convert/cba4a9454262adf0dda24434377cab45.png)
