scroll-behavior: smooth 仅提供声明式缓动，不支持速度继承、衰减或回弹，无法实现真惯性滚动；真苹果级效果需用 JS 模拟物理参数：touchend 采样末速度，requestAnimationFrame 持续衰减更新 transform: translateY()，并做边界阻尼处理。
移动端无法靠 scroll-behavior: smooth 实现真正原生质感的惯性滚动——它不提供惯性，只做缓动；iOS Safari 15.4+ 才开始支持，且常静默降级为瞬时跳转。真要“苹果官网级”的拖拽-释放-滑行效果，必须用 JS 主动控制视图位移 + 物理参数模拟。
为什么 scroll-behavior: smooth 不等于惯性滚动
它只是 CSS 声明式缓动，浏览器内部仍走传统 scroll-to-target 逻辑，没有速度继承、衰减或回弹。用户手指一抬，滚动立刻停止，毫无“甩一下继续滑”的手感。真实惯性滚动需满足三个条件：记录触发末速度、按衰减系数持续更新位置、边界处有阻尼回弹。这些 scroll-behavior 完全不参与。
-
scroll-behavior: smooth只对锚点链接和未传参的scrollIntoView()生效，对scrollTop或scrollTo()调用完全无效 - iOS Safari ≤15.3 完全忽略该声明；15.4–16.0 支持但常卡顿或中途断掉
- 微信 X5、QQ 浏览器等 WebView 多数静默降级，开发者工具里
Computed显示smooth，实际滚动仍是“啪”一声
用 touchstart/touchmove/touchend 模拟惯性滚动的关键点
核心不是“让元素动”，而是“让滚动行为像物理世界一样响应”。重点在 touchend 阶段的速度采样与衰减迭代：
- 在
touchmove中每帧记录e.touches[0].pageY，用时间戳差值算出瞬时速度（单位 px/ms），而非简单位移差 -
touchend后立即启动requestAnimationFrame循环，每次按公式newY = currentY + velocity * decay更新位置，decay建议设为0.97–0.995（值越小衰减越快） - 别直接改
element.scrollTop—— 它会触发重排且无法平滑插值；改用transform: translateY()+will-change: transform硬件加速 - 边界检测必须在每一帧做：
if (newY > 0) newY = newY * 0.3;（上边界阻尼），if (newY （下边界）
绕过 iOS 弹性回弹干扰的必要设置
iOS 默认允许 overscroll（橡皮筋效果），这会让自定义惯性滚动在首尾页被系统层强行截断或叠加，导致滑行中断、位置错乱。必须主动禁用：
立即学习“前端免费学习笔记（深入）”；
- 给滚动容器加
overscroll-behavior: contain;（iOS Safari 16+ 支持）或更稳妥的overscroll-behavior-y: none; - 同时确保容器父级无
overflow: auto泄漏，尤其避免body或html上残留滚动上下文 - 真机调试时，打开 Safari 开发者工具 → “Settings” → 关闭 “Rubber Banding”，否则 CSS 设置可能被覆盖
- 若容器内含
iframe或canvas，它们会拦截 touch 事件，需加pointer-events: none;并在需要交互时动态恢复
用 IntersectionObserver 替代 scroll 事件监听页码变化
惯性滚动期间，scroll 事件触发频率极低甚至丢失（尤其快速滑过一页时），无法可靠判断当前停留页。而 IntersectionObserver 是唯一能在滑行中持续反馈可视状态的 API：
- 观察每个全屏 section，
rootMargin: '0px 0px -50% 0px'让触发阈值落在视口垂直中线，避免上下页同时isIntersecting === true - 回调中只读取
entries[i].isIntersecting和entries[i].target.id，**绝不调用scrollTo或修改 DOM**，否则会打断当前惯性循环 - 如需高亮导航项，用
requestIdleCallback延后更新 class，避免帧率抖动 - 兼容性放心：iOS Safari 11+、Android Chrome 51+ 全支持，无需 polyfill
真正难的不是让页面“动起来”，而是让每一次手指抬起后的滑行都符合物理直觉——速度采样时机、衰减系数微调、边界阻尼曲线、以及和系统 overscroll 的博弈，这些细节稍有偏差，手感就从“丝滑”变成“卡顿”或“飘忽”。别依赖 CSS 声明，把控制权拿回来，才可能接近苹果官网那种“跟手又脱手”的滚动质感。
