通过设置 body { overflow: auto } 并移除子容器的 overflow-y: scroll，可将滚动行为交还给浏览器默认文档流，使滚动条显示在视口右侧，避免局部滚动导致的布局割裂问题。
通过设置 `body { overflow: auto }` 并移除子容器的 `overflow-y: scroll`，可将滚动行为交还给浏览器默认文档流，使滚动条显示在视口右侧，避免局部滚动导致的布局割裂问题。
在 Web 布局中，当某个内部容器（如 #content-box）设置了 overflow-y: scroll 或 auto，且其高度受限时，滚动条会出现在该元素内部——这虽能实现局部滚动，但常带来视觉与交互问题：例如滚动条偏离视口边缘、与居中容器（margin: 0 auto）冲突，造成“悬浮式滚动条”的不协调体验（如 JSFiddle 示例中所示）。
要将滚动行为提升至整个页面层级，关键在于让内容自然撑开 ，并由 控制全局滚动。实现步骤如下：
移除 #content-box 的强制滚动声明
删除其 overflow-y: scroll 及 tabindex="0"（后者仅在需键盘聚焦滚动时才必要，全局滚动下非必需）；-
启用 的默认滚动机制
添加 CSS：body { margin: 0; /* 推荐重置，默认 body 有 8px 外边距 */ overflow-y: auto; /* 或简写为 overflow: auto */ height: 100vh; /* 确保 body 至少占满视口，避免意外截断 */ } -
调整布局逻辑，确保内容可自然流式延伸
移除 .container 的 max-height: 100vh 和 #content-box 的 margin: 0 auto 对高度的影响（因其不再承担滚动容器职责）。若需保持头部固定、内容自适应，建议改用 flex + min-height 方案：.container { display: flex; flex-direction: column; min-height: 100vh; } .header { flex-shrink: 0; } #content-box { flex: 1; /* 占据剩余空间，内容自由延展 */ width: 100%; /* 避免因 flex 行为导致宽度收缩 */ }
✅ 最终效果：滚动条回归浏览器右侧标准位置；内容按文档流自然排列；
成为唯一滚动容器，语义清晰、兼容性强、无障碍支持更佳。⚠️ 注意事项：
- 若页面存在 position: fixed 元素（如导航栏），需额外通过 padding-top 或 margin-top 为其预留空间，防止内容被遮挡；
- 不要对 html 或 body 设置 height: 100%（除非明确需要 viewport 高度约束），优先使用 min-height: 100vh 保证内容足够长时仍可滚动；
- 在移动端，body 滚动可能受 -webkit-overflow-scrolling: touch 等旧属性影响，现代开发中通常无需手动启用，系统默认优化已足够。
