overflow-anchor: none 必须作用于实际滚动的容器（如.editor-content），而非body或contenteditable元素；safari不支持该属性，需js降级；与scroll-behavior: smooth共用会导致平滑滚动失效。
overflow-anchor: none 必须加在编辑器内容容器上，不是整个页面
直接写在 body 或 html 上完全无效。编辑器里真正滚动的是那个包裹富文本内容的 div（比如 class="editor-content"），只有它设置了 overflow-y: auto 且有固定高度/最大高度，overflow-anchor: none 才起作用。
常见错误是给 textarea 或 contenteditable 元素本身加该样式——它不滚动，所以属性被忽略。必须定位到它的父级滚动容器。
- ✅ 正确：
.editor-content { overflow-y: auto; max-height: 400px; overflow-anchor: none; } - ❌ 错误：
div[contenteditable] { overflow-anchor: none; }（无溢出，不生效） - ❌ 错误：
body { overflow-anchor: none; }（非滚动上下文根，不起锚定控制作用）
动态插入新段落时，光标被顶走？先关锚定再手动 scroll
用户正在输入，后端流式返回新段落并插入顶部（如 AI 补全、协作编辑同步），此时默认的 overflow-anchor: auto 会尝试“稳住”某个锚点元素，结果反而把光标所在行推离视口——这不是 bug，是机制在工作。
设为 none 后，插入不触发自动滚动补偿，但你也失去了“位置保护”。所以得自己补逻辑：
- 用
IntersectionObserver监听编辑器底部是否可见，判断当前是否处于“触底状态” - 仅当
isAtBottom === true时，插入后调用container.scrollTo({ top: container.scrollHeight, behavior: 'instant' }) - 否则保持
scrollTop不变，让用户继续看原来的位置 - 避免用
scrollIntoView()，它会触发浏览器再次计算锚点，和overflow-anchor: none冲突
Safari 用户依然跳动？这不是你 CSS 写错了
overflow-anchor 在 Safari 中**完全不支持**（截至 2026 年 6 月）。你在 Chrome 和 Edge 里看到的效果，在 Safari 里根本不会发生——它既不执行 auto 的补偿，也不响应 none 的禁用，行为退回到原始渲染逻辑。
这意味着：靠这个属性做跨浏览器一致性防跳动，注定失败。真实项目中必须搭配降级策略：
- 图片/iframe 插入前，用
aspect-ratio或height: 0; padding-bottom: 56.25%预留空间 - AI 流式输出时，用
white-space: pre-wrap+word-break: break-word控制换行，避免宽度突变引发重排 - 对 Safari 做 UA 检测，启用 JS fallback：监听
DOMNodeInserted（或MutationObserver），在插入后requestAnimationFrame内恢复scrollTop
和 scroll-behavior: smooth 一起用会失效
如果编辑器容器同时设置了 scroll-behavior: smooth 和 overflow-anchor: none，后者会让前者降级为瞬移效果——锚点跳转（比如点击目录跳到某标题）不再平滑，而是“咔”一下到位。
这不是 bug，是规范定义的行为：overflow-anchor: none 关闭的是整个滚动锚定机制，包括由 scroll-behavior 触发的平滑动画底层锚点管理。
- 需要平滑跳转 → 保留
scroll-behavior: smooth，改用其他方式防跳动（如占位符、预估高度） - 需要稳定插入 → 用
overflow-anchor: none，接受跳转变硬，或改用element.scrollIntoView({ behavior: 'smooth', block: 'nearest' })手动控制 - 二者都想要？目前无标准解法，只能按场景取舍
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
