scroll-behavior: smooth 必须写在 html 元素上才有效，Safari 完全忽略 body 上的声明；生效需满足目标元素存在且可见、无妨碍定位的 CSS 属性、未启用 prefers-reduced-motion 等条件。
scroll-behavior: smooth 写在 body 上无效是常态
它必须写在 html 元素上，Safari（包括 iOS 17 之前所有版本）对 body { scroll-behavior: smooth; } 完全忽略——不是 bug，是规范实现差异。浏览器真正的滚动上下文绑定在 html，body 只是内容容器。你看到的滚动条在 body 上，但底层滚动目标是 html。
检查是否生效的唯一方式：打开 DevTools → 选中 html 元素 → 在 Computed 面板里搜索 scroll-behavior，确认值为 smooth；如果只在 body 上写了，这里会显示 auto 或空。
- 某些 CSS 重置（如 Normalize.css）或框架默认把
html的overflow设为hidden，导致该属性静默失效 - 若页面用了自定义滚动容器（如
.chat-list { overflow-y: auto; }），必须单独给它加scroll-behavior: smooth，html的声明不会“穿透”过去 -
@supports (scroll-behavior: smooth)检测不可靠——它只判断 CSS 是否被解析，不反映 Safari 实际是否执行动画
锚点跳转仍硬跳？问题大概率不在 CSS
即使 html 上写了且 computed 值正确，点击 <a href="#contact"></a> 还是瞬时跳转，常见原因如下：
- 目标元素
id="contact"实际不存在，或含空格/大写/特殊字符（如id="Contact Us"→ 应为id="contact-us"） - 目标元素是
display: none、visibility: hidden，或 Vue/React 中尚未挂载完成，浏览器直接 fallback 到硬跳 - 目标或其任意祖先有
transform、filter、will-change，导致坐标系错乱，滚动定位偏移甚至失败 - 用户开启了系统偏好
prefers-reduced-motion: reduce，Safari/Chrome/Firefox 全部静默禁用，不报错也不提示
这些条件任意一个成立，scroll-behavior: smooth 就会被绕过——它不抛错，只是“安静地不工作”。
立即学习“前端免费学习笔记（深入）”；
window.scrollTo({ behavior: 'smooth' }) 在 Safari 中静默降级
Safari 对 JS 平滑滚动有严格触发条件：只有调用栈能追溯到用户手势事件（如 click、touchend）时，才启用动画；否则强制 fallback 为 behavior: 'auto'。这意味着：
-
window.scrollTo({ top: 200, behavior: 'smooth' })在setTimeout或路由守卫中直接调用，大概率瞬时跳转 - 必须包裹在用户事件回调内，或用
event.preventDefault()+ 手动scrollIntoView - iOS Safari 直到 16.4 才支持
scrollTo({ behavior: 'smooth' })，15.4–16.3 仅支持scrollIntoView({ behavior: 'smooth' })
更稳妥的做法是统一用 element.scrollIntoView({ behavior: 'smooth', block: 'start' })，并显式传入 root 参数（如目标在局部容器内）。
别用 smoothscroll-polyfill，手写 requestAnimationFrame 更稳
smoothscroll-polyfill 在 Safari 中常卡顿、错位、多帧叠加，主因是 MutationObserver 触发时机与 Safari layout timing 不一致，且无 cancel 机制。
针对几个固定锚点（如导航栏跳转），30 行内联逻辑更可控：
function smoothScrollTo(el, container = window) {
if (!el.offsetParent) return;
const targetTop = el.getBoundingClientRect().top + container.scrollTop;
const start = container.scrollTop;
const duration = 300;
let startTime = null;
<p>function step(timestamp) {
if (!startTime) startTime = timestamp;
const progress = Math.min((timestamp - startTime) / duration, 1);
const ease = progress < 0.5
? 4 <em> progress </em> progress <em> progress
: (progress - 1) </em> (2 <em> progress - 2) </em> (2 <em> progress - 2) + 1;
container.scrollTop = start + (targetTop - start) </em> ease;
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}关键点：el.offsetParent !== null 校验可见性；用 container.scrollTop += delta 增量更新，避免 Safari 回弹抖动；不依赖全局 polyfill，无兼容性包袱。
真正难的不是写平滑动画，而是判断“此刻能不能滚”——元素是否存在、是否可见、是否在正确容器内、是否受系统偏好压制。这些校验比插值算法重要得多。
