不能。Firefox 的 scrollbar-width 和 scrollbar-color 以及 WebKit/Blink 的 ::-webkit-scrollbar 系列伪元素均不支持 transition 或 animation，浏览器静默忽略；只能通过 class 切换容器的 opacity、transform、border 等可动画属性间接模拟过渡效果。

Firefox 中 scrollbar-width 和 scrollbar-color 能否触发 CSS 过渡？

不能。Firefox 的 scrollbar-width 和 scrollbar-color 是**非过渡属性**，对它们使用 transition 完全无效。浏览器明确不支持这些属性的动画——既不会平滑变化，也不会报错，只是静默忽略。如果你在 devtools 里看到 transition 声明但滚动条样式毫无渐变效果，就是这个原因。

Chrome/Edge/Safari 中伪元素 ::-webkit-scrollbar 系列能否加 transition？

也不能。所有基于 ::-webkit-scrollbar 的伪元素（如 ::-webkit-scrollbar-thumb、::-webkit-scrollbar-track）**不支持任何 transition 或 animation**。尝试给 background-color 或 width 加 transition: background-color 0.3s，结果只会是“瞬间切换”，没有中间帧。这是 WebKit/Blink 内核的硬性限制，不是写法问题。

那怎么实现“看起来平滑”的滚动条样式过渡？

只能靠间接手段模拟：监听滚动状态或 hover 行为，用 class 切换 + 原生可过渡属性组合。关键点在于避开不可动画的 scrollbar 伪类，转而控制容器本身：

• 给滚动容器（如
  ）设置 overflow-y: auto，并用 opacity、transform 或 background 模拟“滚动条出现/隐藏”的视觉反馈
• 用 JavaScript 监听 scroll 或 mouseenter/mouseleave，动态添加 is-scrolled 或 is-hovered 类
• 在该类下，通过 ::-webkit-scrollbar-thumb 改变颜色或圆角，同时用 transition 控制容器内其他元素（比如遮罩层、边框）的动画，制造“连带过渡”感

例如：


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载

.scroller {
  transition: border-color 0.2s ease;
}
.scroller.is-hovered {
  border-color: #6366f1;
}
.scroller::-webkit-scrollbar-thumb {
  background: #6366f1; /* 这个变化仍是瞬时的，但配合 border 动画，观感更连贯 */
}

跨浏览器兼容时最常踩的坑是什么？

开发者常误以为写全三端样式（scrollbar-width + scrollbar-color + ::-webkit-scrollbar）就能统一行为，结果发现 Firefox 下 hover 时颜色突变、Chrome 下滚动中 thumb 大小跳变。根本原因是：三套机制彼此隔离，且都不可过渡。更麻烦的是，scrollbar-color: auto 在 Firefox 中会退回到系统默认样式，而 WebKit 下无法用伪元素还原该效果，导致视觉断层。

真正可控的只有你加在容器上的 class 和它能驱动的原生可动画属性——别试图让滚动条自己动起来，让它“旁边的东西动”，才是实际可行的路径。