瀑布流抖动主因是浏览器滚动锚定机制（overflow-anchor: auto）自动“稳住”视口，导致内容被顶移；需对滚动容器设 overflow-anchor: none 且确保其有 overflow-y: auto，配合图片宽高属性、节点复用及禁用 lazy 加载等措施。

为什么瀑布流追加数据会抖动

不是 JS 写错了，是浏览器在插入新节点时自动触发了滚动锚定（overflow-anchor: auto），试图“稳住”你当前看到的那块内容——结果反而把你正在看的元素顶走了。典型表现：加载更多后，页面突然向上跳一截，光标移位、阅读中断。这个行为完全由渲染层控制，scrollTo 或 scrollTop 补救往往滞后或失效。

必须给滚动容器设 overflow-anchor: none

只对实际发生溢出并滚动的容器生效，不能写在 html 或 body 上。常见错误是加在父级 div 却忘了它本身没设 overflow-y: auto，导致规则被忽略。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 正确写法：

  .waterfall-container {
    overflow-y: auto;
    height: 80vh;
    overflow-anchor: none;
  }

• 若用 Vue 的 <el-scrollbar></el-scrollbar> 或 React 的自定义滚动区，确保该组件最终渲染出的 DOM 节点有 overflow-anchor: none
• 动态插入后调用了 input.focus()？这和锚定无关，得改用 el.focus({ preventScroll: true })

图片占位不牢是抖动放大器

瀑布流里一张图加载慢，整列都会塌陷重排。靠 aspect-ratio 不够稳，尤其 Safari 15.3 前不识别，或服务端未输出 width/height 属性时。

• 硬性要求：<img src="x.jpg" style="max-width:90%" style="max-width:90%"> —— 浏览器首帧即知尺寸，无需等待加载
• 降级方案（旧 Safari）：.img-wrapper::before { padding-bottom: 75%; } + position: absolute 填满
• 禁用 loading="lazy" 在首屏瀑布流中，它会让占位提前失效

别用 innerHTML = '' 或 remove() 清空再重绘

每次清空都触发同步回流 + 事件丢失 + 节点销毁，200 条目滚动中 layout 时间涨 3–5 倍。抖动只是表象，卡顿才是本质。

• 复用节点必须带稳定 dataset.id（如 item-001），不能靠数组索引
• 缓存用 Map，不是数组；回收只设 node.style.display = 'none'，不调 removeChild()
• 插入新数据时，优先从池中取已存在节点，仅更新 src、textContent 等可变字段

真正难防的抖动，往往来自第三方组件在 mounted 里偷偷读 clientHeight 却没做批量读取。Chrome DevTools 的 Performance 面板录一段滚动操作，看 Layout 事件是否密集爆发——抖动从来不是单次插入的问题，而是叠加效应。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！