Chrome/Edge中实现胶囊状滚动条滑块需设::-webkit-scrollbar-thumb的min-height: 40px与border-radius: 20px；Firefox仅支持scrollbar-width和scrollbar-color，无法圆角；Safari需用-webkit-mask-image适配iOS圆角。
Chrome / Edge 中的 ::-webkit-scrollbar-thumb 圆角控制
滚动条滑块（thumb）默认是矩形，想做成胶囊状，核心是设置 border-radius，但必须配合足够大的高度/宽度才能生效。在 Chromium 内核浏览器中，::-webkit-scrollbar-thumb 伪元素支持完整 CSS，但有隐含约束：如果滚动条是垂直方向，height 被忽略，此时必须靠 min-height 或内容撑开；水平方向则同理看 width。
常见错误是只写 border-radius: 20px 却没设 min-height，结果圆角被截断成小圆角矩形。
- 垂直滚动条胶囊效果：给
::-webkit-scrollbar-thumb设置min-height: 40px+border-radius: 20px - 避免用
height: 40px—— 它会强制固定高度，导致滑块无法随内容缩放 - 背景推荐用
background: #888而非渐变，渐变在小尺寸下易显脏，且部分旧版 Chrome 渲染异常
Firefox 的兼容处理：scrollbar-width 和 scrollbar-color
Firefox 不支持 ::-webkit-scrollbar 系列伪元素，但提供了两个 CSS 属性来有限定制： scrollbar-width 控制粗细（auto / thin / none），scrollbar-color 控制 thumb 和 track 颜色。它**不支持圆角、形状或尺寸微调**。
这意味着：Firefox 下无法实现真·胶囊滑块，只能退而求其次做「视觉近似」——用 scrollbar-width: thin + 高对比度颜色让滑块看起来更紧凑，再配合 border-radius 在支持的滚动条区域（如自定义容器）里模拟。
立即学习“前端免费学习笔记（深入）”；
-
scrollbar-color: #666 #eee—— 第一个值是 thumb 色，第二个是 track 色 -
scrollbar-width: thin在 Firefox 64+ 生效，但实际渲染仍略宽于 Chromium 的min-height: 40px效果 - 不要对 Firefox 写
::-webkit-scrollbar规则——它完全忽略，也不报错，容易误以为生效了
真正跨浏览器胶囊滑块：用 JS + 自定义容器替代原生滚动条
当设计要求严格统一（比如必须两端半圆、精确 24px 高、hover 放大），原生滚动条定制能力不足，就得接管滚动行为。主流做法是：隐藏原生滚动条（overflow: hidden），用 div 模拟 track 和 thumb，监听鼠标/触摸事件驱动容器 scrollTop。
关键点不是“怎么做完整滚动条”，而是“如何最小代价实现胶囊滑块”：只需替换 thumb 部分，track 和滚动逻辑复用原生。
- 给容器设
overflow: overlay（仅 Safari/Chrome 支持）或overflow: scroll+padding-right: 16px预留空间 - 绝对定位一个
<div class="custom-thumb">，用 JS 根据 <code>scrollTop / scrollHeight计算 top 值 - 给该 div 设
height: 24px+border-radius: 12px+background: #555，就得到稳定胶囊 - 注意 touchmove 时要
preventDefault()，否则 iOS 会触发弹性回弹干扰位置计算 - 写法：
-webkit-mask-image: radial-gradient(circle at 50% 50%, black 12px, transparent 13px)（适配 24px 高滑块） - 必须同时设
background: #666和-webkit-mask-image，单用 mask 会导致透明失效 - 此方案在 iOS 16.4+ 可靠，但 iOS 15 及更早版本不支持
mask-image，需降级为无圆角
移动端 Safari 的特殊限制：overflow: overlay 无效，border-radius 裁剪异常
iOS 16+ 之前，Safari 完全禁用 ::-webkit-scrollbar 自定义；iOS 16+ 开始支持，但 border-radius 对 thumb 的裁剪行为不稳定——有时圆角被父容器 overflow 隐藏，有时又溢出。根本原因是 WebKit 对滚动条子元素的层叠上下文处理不一致。
实测最稳方案：放弃原生 thumb 圆角，改用 mask-image 裁剪（需配合 -webkit-mask-image）。
圆角胶囊滑块看似只是加个 border-radius，实际卡点全在浏览器差异和尺寸约束上。最易被忽略的是：Firefox 根本不解析 ::-webkit-scrollbar，而 Safari 的 mask-image 适配需要精确匹配滑块像素高度——差 1px 就可能露直角。
