scroll-behavior必须写在html上才生效，因根滚动容器是html而非body；仅支持原生锚点导航且id与href严格匹配；不兼容ie、旧版safari等，需js检测降级；自定义滚动容器需单独设置。
scroll-behavior必须写在html上才生效
写在body上完全无效，因为浏览器的根滚动容器是html元素，不是body。即使body看起来在滚动，实际滚动层仍是html。常见错误是 DevTools 里检查body样式发现该属性存在，但点击锚点仍生硬跳转——本质是作用对象错了。
正确写法只有一行：
html { scroll-behavior: smooth; }不要同时加在html和body上，旧版 Chrome 可能直接忽略。- 若用 CSS 重置（如
* { margin: 0; }），确认没意外把html的height或overflow设为非默认值 - 某些微前端或 CMS 框架会包裹额外 DOM 容器，需用
document.documentElement检查实际根节点是否仍是html - 该属性不触发
scroll事件，依赖它做监听的逻辑要单独处理
锚点失效？先查id和href是否严格匹配
scroll-behavior: smooth只对原生锚点导航（a[href="#xxx"] → element[id="xxx"]）起作用，且要求id值与href中#后的内容**完全一致**：区分大小写、不可含空格、不能用 URL 编码字符（如%20），也不支持name属性。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 动态渲染内容（React/Vue）中，确保
id在组件挂载后真实存在于 DOM，否则跳转会静默失败或回退到页面顶部 - 目标元素若被
display: none、visibility: hidden或opacity: 0隐藏，滚动可能错位或无反应 - 父级有
overflow: hidden或transform时，会截断滚动上下文，导致“滚过头”或停在半路；此时应改用scrollIntoView()
兼容性差怎么办？别硬扛，用 JS 检测 + fallback
IE 全系不支持；iOS Safari 在 15.4 之前也无效；部分安卓 WebView 会降级为普通跳转。不能靠用户升级，得主动检测并降级：
if ('scrollBehavior' in document.documentElement.style === false) {
// 引入 polyfill 或手动实现
import('smoothscroll-polyfill').then(polyfill => polyfill.polyfill());
}
- 更轻量的做法是只对不支持的环境接管
a[href^="#"]点击事件，调用element.scrollIntoView({ behavior: 'smooth' }) - 注意：系统开启了「减少动画」偏好（macOS/Windows 设置），所有
scroll-behavior: smooth会被强制禁用，这是浏览器行为，不是 bug - polyfill 无法还原原生滚动的惯性与性能，复杂页面下主线程压力明显上升
自定义滚动容器也要单独设scroll-behavior: smooth
如果页面有局部可滚动区域（比如div设置了overflow: auto），html上的设置对其完全无效。必须显式给该容器加：
.custom-scroll { scroll-behavior: smooth; overflow-y: auto; }
- 该容器必须满足可滚动条件（内容高度 > 容器高度，且
overflow非visible） - 不能指望
scroll-behavior控制transform或position: fixed模拟的滚动，它只作用于真实的滚动上下文 - 移动端慎用
-webkit-overflow-scrolling: touch：iOS 12–14 下会导致弹性回弹失效，减速过快甚至直接停住
实际项目里最容易被忽略的是：滚动目标是否处于标准文档流中。一旦被position: absolute、transform或嵌套在overflow: hidden容器里，scroll-behavior就大概率失效——这时候别调样式，直接换scrollIntoView()更省事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
