Safari 仅从 macOS 12.0/iOS 15.4 起支持 scroll-behavior: smooth，且仅限页面级滚动；锚点跳转需用 scrollTo + preventDefault 拦截实现，局部容器滚动必须 JS 控制 container.scrollTo。
为什么 scroll-behavior: smooth 在 Safari 里不生效
因为 Safari 直到 macOS Monterey（12.0）和 iOS 15.4 才开始支持 scroll-behavior，且仅限于 document.scrollingElement（即整个页面滚动），对 div 等局部滚动容器仍不支持。更关键的是：即使系统版本达标，Safari 对 a[href^="#"] 锚点跳转的平滑滚动也常被忽略——它只响应原生 scrollTo 调用，不接管 CSS 声明。
用 scrollTo 替代锚点跳转的实操要点
核心思路是拦截所有锚点点击，阻止默认行为，改用 scrollTo 主动滚动。注意不是所有场景都适用 window.scrollTo，需根据目标元素位置动态计算。
- 必须用
event.preventDefault()，否则 Safari 会直接走原生跳转路径，绕过 JS 控制 -
scrollTo的behavior: "smooth"在 Safari 中支持良好（iOS 15.4+ / macOS 12.0+），但旧版需降级为"auto" - 获取目标元素时别用
document.getElementById(href.slice(1))粗暴匹配——ID 可能含特殊字符，应改用document.querySelector(href) - 滚动偏移要考虑 sticky header、fixed navbar 等布局干扰，建议统一加
getBoundingClientRect().top + window.scrollY - offset
一个兼容 Safari 的轻量滚动函数
下面这段代码能覆盖 Safari 常见失效场景，包括局部滚动容器、带偏移的导航栏、以及降级处理：
function smoothScrollTo(target, options = {}) {
const el = typeof target === "string" ? document.querySelector(target) : target;
if (!el) return;
<p>const offset = options.offset || 0;
const container = options.container || window;
const isWindow = container === window;</p><p>const rect = el.getBoundingClientRect();
const scrollTop = isWindow
? rect.top + container.scrollY - offset
: rect.top + container.scrollTop - offset;</p><p>container.scrollTo({
top: scrollTop,
behavior: "smooth"
});
}</p><p>// 绑定锚点
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener("click", e => {
e.preventDefault();
const href = a.getAttribute("href");
if (href === "#") return;
smoothScrollTo(href, { offset: 80 }); // 减去 header 高度
});
});
</p>
Safari 下局部滚动容器（overflow: auto/scroll）的特别处理
如果目标是某个 div 内部平滑滚动，scroll-behavior 在 Safari 中完全无效，必须 JS 控制。此时不能用 window.scrollTo，而要调用容器元素的 scrollTo 方法。
- 确保容器有明确的
height和overflow: auto或scroll，否则scrollTop计算失准 - 使用
container.scrollTo({ top: target.offsetTop - container.offsetTop, behavior: "smooth" })时，注意offsetTop是相对文档的，应改用target.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop - Safari 对局部容器的
scrollTo支持稳定，但若容器本身在 transform 或 will-change 环境中，可能触发渲染 bug，可临时加transform: translateZ(0)强制硬件加速
Safari 的滚动行为差异比想象中更底层——它不把 CSS 声明当“指令”，而只认 JS 调用。所以别纠结 scroll-behavior 怎么写得更标准，重点是把锚点、Tab 键跳转、甚至键盘方向键都收归到同一个 scrollTo 调用路径里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
