CSS 可以自定义滚动条的样式，但是无法做到所有浏览器完全兼容。不同浏览器对滚动条样式的支持程度不同，特别是老版本浏览器。
以下是如何使用 CSS 自定义滚动条，以及提高兼容性的方法：
1. 基本样式自定义 (WebKit 内核浏览器，例如 Chrome, Safari, Edge 等):
::-webkit-scrollbar {
width: 10px; /* 滚动条宽度 */
height: 10px; /* 滚动条高度 (用于横向滚动条) */
}
::-webkit-scrollbar-track {
background: #f1f1f1; /* 滚动条轨道背景 */
}
::-webkit-scrollbar-thumb {
background: #888; /* 滚动条滑块背景 */
border-radius: 5px; /* 滚动条滑块圆角 */
}
::-webkit-scrollbar-thumb:hover {
background: #555; /* 滚动条滑块悬停背景 */
}
::-webkit-scrollbar: 整个滚动条。::-webkit-scrollbar-track: 滚动条轨道。::-webkit-scrollbar-thumb: 滚动条滑块。
2. Firefox 浏览器:
Firefox 对滚动条样式的支持有限，主要可以通过 scrollbar-width 和 scrollbar-color 属性进行一些简单的自定义:
* {
scrollbar-width: thin; /* 滚动条宽度: thin, none, auto */
scrollbar-color: #888 #f1f1f1; /* 滚动条滑块颜色和轨道颜色 */
}
3. Internet Explorer (已过时):
IE 有一些私有的样式属性可以自定义滚动条，但由于 IE 已经过时，不建议再针对其进行适配。
4. 提高兼容性的方法:
- 使用 JavaScript 库: 一些 JavaScript 库，例如 Perfect Scrollbar、SimpleBar 等，可以提供跨浏览器的滚动条自定义方案，并模拟滚动条的行为。这些库通常会创建一个自定义的滚动条覆盖在默认滚动条之上，从而实现更一致的外观和行为。
- 渐进增强: 优先使用 WebKit 的样式自定义，然后使用
scrollbar-width和scrollbar-color为 Firefox 提供基本的样式支持。对于不支持自定义样式的浏览器，保持默认样式即可。 - 条件注释 (已过时): 可以使用条件注释为不同版本的 IE 应用不同的样式，但这已经不再是推荐的做法。
- Polyfill: 可以使用 polyfill 来为不支持某些 CSS 属性的浏览器提供支持，但对于滚动条样式来说，polyfill 的效果可能不如 JavaScript 库理想。
总结:
虽然无法做到完美的跨浏览器兼容，但通过上述方法，可以为大多数现代浏览器提供自定义滚动条样式，并在一定程度上提升用户体验。 建议优先考虑使用 JavaScript 库，以获得更好的兼容性和更丰富的自定义选项。 如果只需要简单的样式调整，可以使用 WebKit 样式和 Firefox 的 scrollbar-width 和 scrollbar-color 属性。 避免过度依赖自定义滚动条，确保在禁用自定义样式的情况下，页面仍然可用。