safari 中 scroll-behavior: smooth 必须写在 html 上才生效，ios 17/macos sonoma 14.0+ 才真正支持，且仅限 html/body；锚点跳转失败常因 id 错误、元素隐藏或 transform 干扰；推荐用 scrollintoview({ behavior: 'smooth' }) 替代 css 声明。
scroll-behavior: smooth 在 Safari 上失效，不是你写错了，而是 Safari 长期不把它当真——它识别该声明，但不执行平滑动画。
scroll-behavior 必须写在 html 上，body 上基本无效
浏览器真正的滚动上下文绑定在 html 元素上，body 只是内容容器。Safari 尤其严格：即使你写了 body { scroll-behavior: smooth; }，它也会静默忽略。必须用：
html { scroll-behavior: smooth; }
还要检查 DevTools 的 Computed 样式，确认 html 的 scroll-behavior 确实是 smooth，而不是被 Normalize.css 或重置样式意外覆盖（比如 html { overflow: hidden; } 会让它彻底失效）。
Safari 原生支持时间线极晚，且仅限特定场景
iOS/macOS 对 scroll-behavior: smooth 的支持非常保守：
- iOS ≤15.3、macOS ≤12.2：完全不解析该属性，CSS 规则被丢弃
- iOS 15.4–16.x：仅支持
scrollIntoView({ behavior: 'smooth' })，scroll-behavior仍被忽略 - iOS 17 / macOS Sonoma 14.0+：才真正支持
scroll-behavior: smooth，但仅限html或body；对普通overflow容器（如.list { overflow-y: auto; }）依然静默忽略
这意味着：你在 .sidebar 上写 scroll-behavior: smooth，Safari 看见了也当没看见。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
锚点跳转失败的常见隐藏原因
即使 CSS 写对了，点击链接仍可能瞬时跳转或滚到顶部，问题往往不在 CSS：
-
href指向的id不存在，或含空格/大写/特殊字符（如id="Contact Us"→ 应改为id="contact-us"） - 目标元素被
display: none、visibility: hidden隐藏，或 Vue/React 中尚未挂载完成 - 目标元素或其祖先用了
transform、filter、will-change，导致坐标系错乱，滚动定位偏移 - 用户启用了系统偏好
prefers-reduced-motion: reduce，浏览器会强制禁用所有平滑行为，且不报错
比 polyfill 更稳的替代方案是手写 scrollIntoView + 校验
引入 smoothscroll-polyfill 在 Safari 中反而容易卡顿、错位，主因是 MutationObserver 时机差异和多帧叠加。更轻量可控的做法是：
- 监听
hashchange事件，而非只靠原生锚点 - 用
document.getElementById()获取目标，避免querySelector返回null导致静默失败 - 加存在性校验：
if (el && el.offsetParent !== null)，跳过不可见元素 - 显式调用：
el.scrollIntoView({ behavior: 'smooth', block: 'start' })，不依赖 CSS 声明
注意：即使全局设了 scroll-behavior: smooth，JS 调用 scrollIntoView() 仍需手动传参，否则默认是 behavior: 'auto'。
最常被忽略的一点：Safari 对滚动容器的判定极其苛刻——哪怕只是父级加了个 transform，或滚动容器高度靠 flex 自动撑开而没设 height/max-height，scroll-behavior 就会彻底失效，且没有任何提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
