如何用css自定义滚动条？能做到所有浏览器兼容吗？想要做兼容怎么办呢？

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 属性。避免过度依赖自定义滚动条，确保在禁用自定义样式的情况下，页面仍然可用。