通过防抖机制控制 canvas 尺寸更新频率，并配合 css 重置滚动行为，可彻底解决因动态调整 canvas 大小导致的浏览器滚动条反复显示/隐藏（即“闪烁”）问题。
通过防抖机制控制 canvas 尺寸更新频率，并配合 css 重置滚动行为，可彻底解决因动态调整 canvas 大小导致的浏览器滚动条反复显示/隐藏（即“闪烁”）问题。
在实现全屏 Canvas（如游戏、可视化或交互式绘图场景）时，一个常见却棘手的问题是：当监听 ResizeObserver 动态设置 canvas.width 和 canvas.height 以匹配视口尺寸时，页面会短暂触发滚动条出现——尤其在移动端横竖屏切换瞬间，滚动条“闪现”不仅影响视觉体验，还可能干扰用户操作。
根本原因在于：Canvas 尺寸变更后若超出当前视口内容区域（即使仅 1px），浏览器会临时启用滚动机制，触发 body 的 overflow 计算变化，进而造成滚动条闪现；而 ResizeObserver 的高频回调（如连续触发数次）会加剧该现象。
✅ 推荐解决方案包含两个关键层：
1. JavaScript 层：轻量防抖（Debounce）控制尺寸更新
不直接响应每次 resize 事件，而是引入状态锁 + 延迟释放机制，确保 Canvas 尺寸仅在 resize 稳定后更新一次：
let shouldResize = true;
const screenSizeObserver = new ResizeObserver(() => {
if (!shouldResize) return;
shouldResize = false;
const w = document.body.clientWidth;
const h = document.body.clientHeight;
if (canvas) {
canvas.width = w;
canvas.height = h;
}
// 1秒内忽略后续 resize，等待布局稳定
setTimeout(() => { shouldResize = true; }, 1000);
});
screenSizeObserver.observe(document.body);
⚠️ 注意：1000ms 是保守值，实际可根据设备性能调整为 300–500ms；若需更精准控制，可改用 requestIdleCallback 或基于 performance.now() 的时间窗口判断。
2. CSS 层：强制禁用非必要滚动
在根元素上显式声明 overflow: hidden，并确保 body 不因 Canvas 渲染产生额外布局偏移：
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden; /* ? 关键：阻止滚动条生成 */
box-sizing: border-box;
}
canvas {
display: block; /* ? 避免行内元素默认间距 */
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
? 进阶提示：
- 若需支持 Canvas 内容缩放（如高清屏适配），请结合 window.devicePixelRatio 动态设置 canvas.style.width/height 与 canvas.width/height 的比例，避免模糊；
- 在 visibilitychange 回调中建议增加 document.hidden 判断，防止后台标签页误触发初始化；
- 对于 PWA 或全屏 Web App，可额外添加 进一步约束缩放行为。
综上，滚动条闪烁并非 Canvas 本身缺陷，而是布局响应节奏与浏览器渲染机制不匹配所致。通过「JS 防抖 + CSS 锁溢出」双管齐下，即可实现真正平滑、无闪烁的全屏 Canvas 自适应体验。
