根本原因是浏览器对自定义滚动条的底层行为控制极弱，::-webkit-scrollbar只管外观，不干预拖拽加速度、惯性衰减、回弹等原生滚动行为，导致卡顿、粘滞、滞后等问题。
为什么 ::-webkit-scrollbar 滑块拖动发涩、没“跟手感”
根本原因不是 CSS 写错了，而是浏览器对自定义滚动条的底层行为控制极弱——::-webkit-scrollbar 只管“长什么样”，不管“怎么动”。滑块拖拽时的加速度、回弹、阻尼、惯性，全由浏览器原生滚动引擎决定，CSS 无法干预。
常见表现：拖动滑块时卡顿、松手后不回弹、快速拖拽后滑块“粘住”不动、移动端响应延迟明显（实测 iOS Safari 平均滞后 180–220ms）。
-
overflow: overlay已废弃，禁用；它曾试图减少视觉干扰，但会破坏手势滚动链路，尤其在 macOS Safari 中导致拖拽失灵 - 不要给
::-webkit-scrollbar-thumb加transition或transform，这些属性被忽略，还可能触发重绘抖动 - 滑块宽度
width小于 6px 时，Chrome/Edge 会自动拉高以保证可点击区域，造成视觉突兀和拖拽偏移
scroll-behavior: smooth 和自定义滚动条能共存吗
能，但作用域完全分离：scroll-behavior: smooth 控制的是「滚动目标位置的变化节奏」，而 ::-webkit-scrollbar 只绘制「滚动条外观」。两者互不感知，也不冲突。
关键限制在于：平滑滚动只对 scrollIntoView()、锚点跳转、scrollTop 变更生效，对鼠标直接拖拽滑块无效——后者永远是原生惯性滚动。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
html { scroll-behavior: smooth }必须写在html上，写在body或滚动容器上无效 - 若容器用了
overflow: auto且设置了scroll-behavior: smooth，其内部锚点跳转会平滑，但用户手动拖滑块仍无变化 - iOS Safari 在系统“减少动画”开启时，
scroll-behavior: smooth会被静默降级为瞬时滚动，且不抛错
Firefox / Safari 下如何让滑块“有点反馈感”
Firefox 只支持 scrollbar-width 和 scrollbar-color，Safari（macOS/iOS）16.4+ 才开始支持这两个属性，且仍不认 ::-webkit-scrollbar。它们没法改圆角或加阴影，但可以通过颜色对比制造轻微视觉反馈。
-
scrollbar-width: thin是唯一能激活scrollbar-color的前提，设auto或none时颜色设置被忽略 -
scrollbar-color: #6366f1 #f9fafb中顺序不能反，第二个值是轨道色；设transparent会让轨道“消失”，但滑块仍可拖——这反而放大了拖拽时的孤立感，不推荐 - Safari 下若系统偏好中启用了“自动隐藏滚动条”，所有 CSS 设置（包括
scrollbar-width）都会被无视，这是不可绕过的系统策略
真要调阻尼感，只能换方案
如果你需要精确控制拖拽加速度、松手回弹曲线、滚动衰减系数，或者想在 iOS 上获得接近原生的触感，::-webkit-scrollbar 和 scroll-behavior 都做不到。此时必须放弃原生滚动条，用 JS 库接管。
目前最轻量可靠的两个选择：
-
simplebar：仅接管滚动容器，保留原生滚动事件语义，支持overscroll-behavior、scroll-margin等现代属性，iOS 触控延迟优化较好 -
overlay-scrollbars：提供scrollingThreshold、bounceEasing、nativeScrollbarsOverlaid等精细参数，能模拟 macOS 的弹性回弹和阻尼曲线
注意：JS 滚动库会禁用原生 scroll 事件，改发自定义事件（如 scrollbar:scroll），监听逻辑需同步调整；且所有 scroll-behavior 声明将失效，平滑滚动需由库内配置驱动。
