直接在 html 元素设置 scroll-behavior: smooth 可实现全局平滑滚动，仅对锚点跳转和 scrollIntoView() 生效，不支持 scrollTop 赋值；局部容器需同时设 scroll-behavior: smooth 和 overflow；旧浏览器可用 scrollIntoView({behavior:'smooth'}) 降级。
如何用 scroll-behavior 实现全局平滑滚动
直接在 html 或 body 元素上设置 scroll-behavior: smooth 就能开启原生平滑滚动，无需 JS。但注意：它只对通过锚点跳转（如 <a href="#section">）或 scrollIntoView() 触发的滚动生效，对 scrollTop 赋值无效。
常见错误是写在 div 上期望局部容器平滑——不行，该属性只作用于可滚动的根容器（html）或设置了 overflow 的块级元素，且浏览器支持要求较新（Chrome 61+、Firefox 68+、Safari 15.4+）。
- 推荐写法：
html { scroll-behavior: smooth; } - 若只需局部容器（如弹窗内列表），给该容器加：
.scroll-container { scroll-behavior: smooth; overflow-y: auto; } - 不兼容旧浏览器时，
scrollIntoView({ behavior: 'smooth' })是更稳妥的 JS 替代方案
用 CSS 自定义滚动条样式（WebKit only）
目前只有基于 WebKit/Blink 的浏览器（Chrome、Edge、Safari）支持 ::-webkit-scrollbar 系列伪元素，Firefox 不支持，不能当作跨浏览器方案。
关键组件有四个：::-webkit-scrollbar（整体轨道）、::-webkit-scrollbar-track（背景）、::-webkit-scrollbar-thumb（拖拽块）、::-webkit-scrollbar-corner（右下角交汇处）。漏掉 track 或 thumb 会导致样式失效。
立即学习“前端免费学习笔记（深入）”；
- 最小可用组合：
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #a0a0a0; } -
width/height必须显式设置，否则滚动条不可见 - 不要用
opacity控制显示隐藏——这会让滚动区域响应变差；改用display: none配合 JS 切换更可靠
让 scrollTop 动画也平滑（不用第三方库）
直接赋值 element.scrollTop = 100 永远是瞬时跳转。想让它动起来，得用 scrollTo() 的 { behavior: 'smooth' } 选项，或封装一个简易的定时器过渡。
原生 scrollTo() 支持两个参数形式：scrollTo(x, y) 和对象形式：scrollTo({ top: y, left: x, behavior: 'smooth' })。前者不支持 behavior，必须用后者。
- 安全写法（带降级）：
if ('scrollBehavior' in document.documentElement.style) { window.scrollTo({ top: 200, behavior: 'smooth' }); } else { window.scrollTo(0, 200); // 降级为瞬时 } - 对非窗口元素（如
div），调用其scrollTo()方法，不是设置scrollTop - 频繁触发（如滚动监听中）慎用平滑，会阻塞主线程；优先考虑
passive事件监听 + 节流
美化滚动条时最常被忽略的细节
很多人调完颜色就以为完成了，结果在高分屏、深色模式或触屏设备上出问题。
- 深色模式下，硬编码
#ffffff背景会让滚动条“消失”，建议用color-scheme: light dark配合CSS 变量动态切换 - iPad Safari 对
::-webkit-scrollbar支持不稳定，有时需加-webkit-appearance: none强制重绘 - 滚动条宽度影响布局：设置
width: 12px后，容器内容区实际宽度会减少 12px（除非父容器有box-sizing: border-box且预留了空间） - 移动端（尤其 iOS）默认隐藏滚动条，
::-webkit-scrollbar样式可能完全不渲染——这不是 bug，是系统策略，别强行“修复”
