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

自定义滚动条样式在CSS中是一个相对复杂且在不同浏览器间存在差异的主题。原生CSS提供了一些伪元素来定制滚动条的样式，但这些伪元素的支持情况因浏览器而异。

使用CSS自定义滚动条

在WebKit浏览器（如Chrome和Safari）中，你可以使用以下伪元素来自定义滚动条：

• ::-webkit-scrollbar：整个滚动条。
• ::-webkit-scrollbar-button：滚动条上的按钮（通常位于滚动条的两端）。
• ::-webkit-scrollbar-track：滚动条轨道。
• ::-webkit-scrollbar-track-piece：滚动条轨道的一部分，不包括按钮。
• ::-webkit-scrollbar-thumb：滚动条上的拖动块。
• ::-webkit-scrollbar-corner：当同时有垂直滚动条和水平滚动条时，位于两者交汇处的角落。
• ::-webkit-resizer：在某些元素上出现的可调整大小的拖动手柄。

例如，以下CSS代码自定义了WebKit浏览器中的滚动条样式：

/* 定义滚动条宽度 */
::-webkit-scrollbar {
  width: 10px;
}

/* 轨道样式 */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* 拖动块样式 */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

/* 拖动块悬停样式 */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

浏览器兼容性

不幸的是，Firefox和某些版本的Edge（基于非Chromium引擎）不支持上述WebKit特定的伪元素。因此，在这些浏览器中，你将无法使用纯CSS来自定义滚动条。

实现跨浏览器兼容的自定义滚动条

要实现跨浏览器的自定义滚动条，你通常需要采取以下策略之一：

1. 使用JavaScript库：有一些JavaScript库（如SimpleBar、Perfect Scrollbar等）可以帮助你创建自定义且跨浏览器的滚动条。这些库通常通过隐藏原生滚动条并添加自定义的DOM元素和事件监听器来模拟滚动行为。

2. 使用CSS和JavaScript结合：你可以自己编写CSS和JavaScript代码来隐藏原生滚动条，并通过添加可拖动的自定义元素来模拟滚动功能。这种方法需要更多的工作，但它允许你完全控制滚动条的外观和行为。

3. 接受浏览器差异：如果你认为自定义滚动条不是项目中的关键要素，你可以选择仅在支持自定义滚动条的浏览器中应用样式，而在其他浏览器中保持默认样式。这可以通过使用特性检测（feature detection）或用户代理字符串（user agent strings）来实现。

在选择实现方法时，请考虑项目的需求、目标受众以及你愿意投入多少开发工作。