scroll-behavior: smooth 仅控制滚动动画缓动效果，与滚动条样式（如显隐、颜色、圆角）完全无关；后者需用 ::-webkit-scrollbar（WebKit）和 scrollbar-color/scrollbar-width（Firefox）等独立机制实现。
scroll-behavior: smooth 和滚动条美化是两件事
很多人一看到“平滑滚动”就下意识往 scroll-behavior: smooth 上靠，但这个属性只控制**滚动动画的缓动效果**，和滚动条**长什么样、显不显示、悬停怎么变色**完全无关。它作用于滚动容器（比如 html 或带 overflow: auto 的 div），而滚动条样式需要另一套独立机制。混淆这两者，会导致你调了半天 scroll-behavior 却发现滚动条还是灰扑扑的——因为根本没碰对地方。
::-webkit-scrollbar 在 SCSS 中的正确写法
SCSS 本身不改变 CSS 伪元素的行为，但能帮你更安全地组织和复用滚动条样式。关键点在于：必须用双冒号 ::-webkit-scrollbar（不是单冒号），且所有相关伪元素（::-webkit-scrollbar-track、::-webkit-scrollbar-thumb 等）要写在同一个选择器作用域下，否则容易被覆盖或失效。
推荐写法示例（可直接复制进 _scrollbar.scss）：
// 基础滚动条尺寸与容器适配
%scrollbar-base {
&::-webkit-scrollbar {
width: 8px;
height: 8px;
}
&::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 4px;
}
&::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
&:hover {
background: #999;
}
}
&::-webkit-scrollbar-corner {
background: transparent;
}
}
// 在具体组件中复用
.select2-results__options {
@extend %scrollbar-base;
}
.swal2-popup {
@extend %scrollbar-base;
}
注意：@extend 比 @include 更合适，因为伪元素无法被 mixin 直接注入到目标选择器内部；若用 @include，生成的 CSS 会丢失父级上下文，导致样式不生效。
立即学习“前端免费学习笔记（深入）”；
Firefox 兼容必须加 scrollbar-color + scrollbar-width
Chrome/Safari/Edge 能识别 ::-webkit-scrollbar，但 Firefox 完全无视——它只认 scrollbar-color 和 scrollbar-width 这两个原生属性。这两个属性必须写在**同一个滚动容器元素上**，且顺序不能颠倒（scrollbar-color 在前，scrollbar-width 在后）。
常见错误：
- 只写
scrollbar-color: #5897fb #f0f0f0，漏掉scrollbar-width→ Firefox 回退为默认粗条 - 把这两个属性写在
html上，但实际滚动发生在某个.content区域 → 样式不生效 - 值写成
scrollbar-width: thin但没配scrollbar-color→ Firefox 忽略该声明
正确做法：
.select2-results__options,
.swal2-popup,
.custom-scroll-area {
scrollbar-color: #5897fb #f0f0f0;
scrollbar-width: thin;
}
IE11 / Safari 15.6 及更老版本的兜底逻辑
IE11 不支持任何滚动条 CSS 属性；Safari 15.6 之前对 ::-webkit-scrollbar-thumb:hover 支持不稳定；部分旧版 Edge 会忽略 border-radius。这时候不能指望纯 CSS，得靠降级策略：
- 先检查是否支持
scrollbar-color：用@supports (scrollbar-color: auto)包裹 Firefox 样式 - 对 WebKit 内核，用
@supports selector(::-webkit-scrollbar)包裹整套::-webkit-scrollbar规则（注意：Safari 16.4+ 已开始限制部分伪元素，此检测仍有效） - IE11 用户看到原生滚动条是合理预期，不必强求美化；但需确保
overflow: auto正常工作，避免内容被截断
真正容易被忽略的是：当页面启用深色模式时，scrollbar-color 的值如果写死为 #5897fb #f0f0f0，在暗背景下会变成灰白反差刺眼。建议用 CSS 变量动态绑定：
:root {
--scroll-thumb: #5897fb;
--scroll-track: #f0f0f0;
}
@media (prefers-color-scheme: dark) {
:root {
--scroll-thumb: #4a76d8;
--scroll-track: #2d2d2d;
}
}
.custom-scroll-area {
scrollbar-color: var(--scroll-thumb) var(--scroll-track);
scrollbar-width: thin;
}
