scroll-behavior: smooth 在移动端（尤其iOS Safari）默认不生效，iOS 15.4前完全不支持，iOS 16+仅对scrollIntoView()有效且需JS显式调用；安卓Chrome 89+支持，但CSS全局声明无效。可靠方案是用el.scrollIntoView({behavior: 'smooth'})配合降级处理和时机控制。
scroll-behavior: smooth 在移动端到底管不管用
在 iOS Safari 和大多数安卓 Chrome 上，scroll-behavior: smooth 默认不生效——不是写法错，是浏览器压根没实现或默认禁用。尤其 iOS 15.4 之前完全无视该属性；iOS 16+ 虽支持，但仅限于 scrollIntoView() 调用时，且需手动开启 scroll-behavior，CSS 里写的全局 html { scroll-behavior: smooth; } 依然被忽略。
怎么让锚点跳转真正平滑（兼容 iOS + 安卓）
别依赖 CSS 全局声明，改用 JavaScript 主动控制滚动行为，配合 scrollIntoView() 的 behavior 选项：
-
scrollIntoView({ behavior: 'smooth', block: 'start' })是目前最可靠的方式，iOS 16+、安卓 Chrome 89+ 均支持 - 必须确保目标元素存在且可计算位置，否则会静默失败（不报错，但不动）
- 避免在
DOMContentLoaded之前调用，建议加setTimeout(..., 0)或监听load事件后再执行 - 如果目标是 hash 变化触发的跳转（如点击
<a href="#section2">），需阻止默认行为，再手动滚动：document.addEventListener('click', e => { if (e.target.matches('a[href^="#"]')) { e.preventDefault(); const el = document.querySelector(e.target.getAttribute('href')); if (el) el.scrollIntoView({ behavior: 'smooth' }); } });
为什么给 html 设置 scroll-behavior 没用
因为移动端浏览器（尤其是 WebKit 内核）把 scroll-behavior 当作“非关键渲染提示”，不参与原生导航逻辑。即使你写了：
html { scroll-behavior: smooth; }它只对 scrollTo() 或 scrollBy() 生效，而对点击锚链接、location.hash 变更、history.pushState() 后的自动滚动完全无效。
- iOS Safari 直到 iOS 16 才开始部分支持该属性，且仅限于 JS 主动调用场景
- 安卓 WebView（尤其旧版）可能解析该样式但不执行平滑动画，表现为瞬间跳转
- 某些 PWA 或 hybrid 容器（如 Cordova、Capacitor）会拦截 hash 变更，此时 CSS 属性彻底失效
smooth 滚动的性能和体验隐患
平滑滚动不是免费的，尤其在低端 Android 设备或长列表页中容易卡顿或延迟响应：
立即学习“前端免费学习笔记（深入）”；
- 滚动期间会持续触发
scroll事件，若绑定了重绘逻辑（如 sticky header 判断），可能掉帧 - 多次快速点击锚点，
scrollIntoView()不会自动取消前一次动画，导致“抖动”或目标偏移 - 无障碍用户可能关闭动画偏好（
prefers-reduced-motion: reduce），此时应检测并降级为 instant 滚动：if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { el.scrollIntoView({ behavior: 'auto' }); } else { el.scrollIntoView({ behavior: 'smooth' }); }
