chrome 中网页出现视觉抖动（screen shaking）通常由 `overflow: auto` 在动态内容变化时触发滚动条反复出现/消失导致，将 `overflow: auto` 替换为 `overflow-y: scroll` 可强制保留垂直滚动条空间，消除布局重排抖动。

网页在 Chrome 中出现“抖动”（即内容区域轻微上下跳动、闪烁或持续重排），是一种典型但易被忽视的渲染问题。它往往不会在 Firefox、Safari 或 Edge 上复现，也难以在开发者本地环境稳定重现——这正说明问题与 Chrome 特定的滚动条行为和布局计算机制密切相关。

? 根本原因：overflow: auto 引发的宽度争夺战

当元素设置 height: 20em; overflow: auto 时，Chrome 会根据内容是否溢出动态决定是否显示滚动条。一旦内容高度临界于触发滚动条的阈值（例如因 jQuery 动态插入/删除 DOM、字体加载完成、图片尺寸回填等引起微小高度变化），浏览器就会：

• 显示滚动条 → 占用约 16–17px 垂直空间 → 内容区可用宽度突然减小 → 触发 reflow；
• 内容因宽度变窄而换行/压缩 → 高度略微增加或减少 → 又可能不再溢出 → 滚动条消失；
• 滚动条消失 → 宽度恢复 → 内容再次舒展 → 高度变化 → 滚动条又出现……

这个“滚动条 ↔ 无滚动条”的循环切换，在高频渲染（如动画、轮播、实时更新列表）场景下会表现为肉眼可见的页面抖动或闪烁。

✅ 正确解法：固定滚动容器的布局空间

将问题样式从：

.element {
  height: 20em;
  overflow: auto; /* ❌ 动态切换，隐患源头 */
}

改为：

.element {
  height: 20em;
  overflow-y: scroll; /* ✅ 强制保留垂直滚动条占位空间 */
  overflow-x: hidden; /* 可选：禁用水平滚动，避免意外横向滚动条 */
}

? 关键原理：overflow-y: scroll 会在所有情况下始终预留滚动条所需的空间（即使内容未溢出），从而确保容器宽度和内部布局完全稳定，彻底切断抖动链路。

? 实施建议与注意事项

• 全局搜索定位：在项目 CSS、内联 style 属性（如你案例中的 ）及 JS 动态设置中，搜索 overflow: auto 或 overflow:scroll（注意大小写与空格变体），重点检查带固定高度（height / max-height）的容器。
• 慎用 overflow: hidden：虽可阻止滚动条出现，但会截断溢出内容，损害可访问性与功能，不推荐作为抖动修复方案。
• 现代替代方案（进阶）：若需更精细控制，可结合 CSS scrollbar-gutter: stable both-edges（Chrome 94+ 支持）：

  .element {
    height: 20em;
    overflow-y: auto;
    scrollbar-gutter: stable both-edges; /* 预留滚动条间隙，无需强制显示 */
  }

  该属性能在保持 auto 行为的同时，主动保留滚动条空间，兼顾体验与稳定性。

• 验证方式：在 Chrome DevTools 的 Rendering 面板中勾选 Layout Shift Regions，抖动元素通常会高亮为红色闪动区域；也可录制 Performance 面板的帧率曲线，观察是否存在密集的 Layout / Paint 事件。

✅ 总结

网页在 Chrome 中“抖动”，90% 以上源于 overflow: auto + 固定高度容器的组合陷阱。最简单、兼容性最好、效果最直接的修复方式，就是将 overflow: auto 显式替换为 overflow-y: scroll。这一改动轻量、无副作用、无需修改 HTML 结构或 JavaScript 逻辑，是前端开发中值得写入团队 CSS 规范的“防抖黄金实践”。