scroll-behavior: smooth 未生效主因是作用对象错误，必须设在 html（滚动容器）而非 body；需配合 scroll-margin-top 解决 fixed header 遮挡，并用 JS fallback 兼容旧浏览器及 iOS 异常。

scroll-behavior: smooth 为什么没生效

直接在 html 或 body 上加 scroll-behavior: smooth 却没滚动效果，大概率是 CSS 优先级或作用对象错了。这个属性必须作用于**滚动容器**，而默认情况下，html 元素才是文档级滚动容器（不是 body）。但某些浏览器（如旧版 Safari）不支持 html 上的该声明，此时需 fallback 到 JS。

• ✅ 正确写法：

  html { scroll-behavior: smooth; }

• ❌ 错误写法：

  body { scroll-behavior: smooth; }

  （多数情况下无效，因 body 不是实际滚动容器）
• ⚠️ 注意：若页面设置了 overflow: hidden 或 height: 100vh 等限制，可能让 html 失去滚动能力，导致该属性失效

锚点跳转时 URL hash 不更新或跳转错位

启用 scroll-behavior: smooth 后，点击 <a href="#section"> 能平滑滚动，但有时 hash 不变、或滚动终点偏移——这通常和目标元素的 margin/padding/border 或 CSS transform 相关。

• 目标元素（如 <div id="section">）顶部被遮挡？常见于 fixed header 下，需配合 scroll-margin-top
• ✅ 推荐写法：

  #section { scroll-margin-top: 80px; }

  （预留导航栏高度）
• ❌ 避免用 margin-top: -80px + padding-top: 80px 模拟锚点偏移，会破坏文档流且影响 JS 获取 offsetTop
• 注意：scroll-margin-top 在部分旧浏览器（如 Safari 15.4 之前）不支持，需 JS 补充

JavaScript 手动触发平滑滚动的兼容写法

当需要程序化滚动（比如点击按钮、路由切换后），不能只依赖 CSS，得用 element.scrollIntoView() 或 window.scrollTo()，并显式指定行为。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• ✅ 推荐：

  document.getElementById('section').scrollIntoView({ behavior: 'smooth' });

• ✅ 替代方案（更精确控制）：

  window.scrollTo({ top: document.getElementById('section').offsetTop, behavior: 'smooth' });

• ⚠️ 注意：offsetTop 是相对于最近有定位的祖先元素计算的，若父级有 transform，会导致值失真，此时应改用 getBoundingClientRect().top + window.scrollY
• 兼容性提示：IE 完全不支持 behavior: 'smooth'，需检测后降级为 scrollTop 动画

移动端 Safari 的 scroll-behavior 表现异常

iOS 15.4+ 支持 scroll-behavior: smooth，但存在两个典型问题：滚动延迟明显、hashchange 事件触发时机异常。这不是 bug，而是 Safari 对滚动性能的保守策略。

立即学习“前端免费学习笔记（深入）”；

• 现象：点击锚点后卡顿半秒才开始动，或滚动未完成时就触发 hashchange
• ✅ 缓解方式：避免在 hashchange 回调里立即操作 DOM；改用 requestAnimationFrame 延迟到下一帧
• ✅ 更稳妥做法：对 iOS 设备禁用 CSS 平滑滚动，统一走 JS 实现，便于控制时机和回调
• 检测方式：

  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

平滑滚动看着简单，真正落地时，scroll-margin-top 的取值、iOS 的 timing 差异、以及 transform 对 offsetTop 的干扰，才是最常卡住人的地方。