局部滚动容器内容晃动90%源于父容器宽度未锁定或fixed元素错位；需强制html滚动条常驻（overflow-y: scroll）并把fixed元素移出局部滚动容器，置于body直系子级。
局部滚动容器内容晃动，90% 是因为父容器没锁住宽度或 fixed 元素错位 —— 不是 JS 问题，也不是浏览器 bug，而是 CSS 渲染逻辑被意外打破。
为什么局部滚动容器一滚动就跳
常见现象：在 .scroll-container { overflow-y: auto; height: 400px; } 里放内容，滚动时顶部固定栏、居中卡片或 flex 布局元素突然左移/抖一下。根本原因有两个：
- 父级（比如
body）因全局滚动条显隐导致宽度突变，间接影响子容器内 100% 宽度元素的布局基准 -
position: fixed元素写在局部滚动容器内部（如.scroll-container > .header { position: fixed; }），它本该相对视口定位，却被截断在局部滚动上下文里，浏览器反复修正位置
必须对 html 设置 overflow-y: scroll 或 scrollbar-gutter
即使你只想要局部滚动，也不能放任 html 的滚动条自由显隐 —— 否则整个页面的宽度基准会浮动，所有依赖视口宽度的计算（包括子容器的 100%、calc(100vw - 100%)）都会失准。
- 最简兜底：
html { overflow-y: scroll; }，强制垂直滚动条常驻，锁死视口宽度 - 现代方案（Chrome 94+/Firefox 97+/Safari 16.4+）：
html { overflow-y: auto; scrollbar-gutter: stable; } - 必须用
@supports回退：html { overflow-y: scroll; } @supports (scrollbar-gutter: stable) { html { overflow-y: auto; scrollbar-gutter: stable; } } - 别写在
body或.scroll-container上 ——scrollbar-gutter只对根滚动容器html生效，其他地方写等于没写
fixed 元素必须移出局部滚动容器
只要 position: fixed 出现在 overflow: auto 的父元素内部，就会触发定位基准错乱。微信小程序 scroll-view、Vue 的 el-scrollbar、甚至自定义 div 滚动容器都一样。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<div class="scroll-container"><header class="fixed-top">...</header></div>，且.fixed-top { position: fixed; top: 0; } - 正确做法：把
.fixed-top移到<body>直接子级，再用 CSS 控制层级和尺寸 - 替代方案（需兼容性兜底）：
position: sticky（IE 不支持）、或用transform: translateY()+requestAnimationFrame模拟固定效果 - 第三方组件库（如 Element Plus、Ant Design Vue）可能在内部注入
fixed元素，要检查 DevTools 的 computed styles 确认定位上下文
别在滚动监听里反复读 offset 类属性
哪怕你没写 fixed、也锁死了 html 宽度，如果在 scroll 回调里频繁调用 getBoundingClientRect() 或 offsetHeight，照样会引发 layout thrashing，表现为“滚动卡顿+视觉跳动”。
- 错误模式：
scrollContainer.addEventListener('scroll', () => { el.offsetTop; el.offsetHeight; /* 多次读取 */ }); - 正确模式：先批量读取所需几何信息，再统一写样式
scrollContainer.addEventListener('scroll', () => { const rect = targetEl.getBoundingClientRect(); const { top, height } = rect; // 所有读取操作只做一次 targetEl.style.transform = `translateY(${Math.max(0, 100 - top)}px)`; }); - 避免循环中对多个元素逐个读
offsetTop—— 改为document.querySelectorAll(...).forEach收集后统一读
真正难处理的不是你写的那几行 CSS，而是多个“看似无害”的组合：比如 html 没锁宽 + 局部容器用了 sticky + 第三方弹窗组件悄悄调用了 clientHeight —— 这些叠加起来，抖动就藏得特别深，得靠 Performance 面板看 Layout 事件密度才能揪出来。
