如何将滚动条从content-box移至window窗口？

滚动条绑定在content-box元素上而非浏览器窗口（window）上，且content-box未占满窗口宽度，导致滚动条出现在页面中间，视觉效果突兀。需要将滚动条转移到window层面。

核心是将滚动行为从content-box转移到页面全局，调整布局让内容自然溢出视窗时触发窗口滚动，同时保持内容居中的样式。

修改后的代码 #

HTML（无需改动） #

<!DOCTYPE html>
<html lang="en">
   <head></head>
   <body>
      <div class="container">
         <div class="header">Title</div>
         <div id="content-box" tabindex="0">
            <div class="content">content</div>
            <div class="content">content</div>
            ...
            <div class="content">content</div>
         </div>
      </div>
   </body>
</html>

CSS 基础版（滚动条移至窗口） #

html, body {
  margin: 0;
  padding: 0;
}

.container {
  display: block; /* 移除原有的flex布局和max-height限制 */
}

#content-box {
  margin: 0 auto; /* 保持内容居中 */
  max-width: 800px; /* 可选：限制内容最大宽度，避免过宽 */
  /* 移除原有的overflow-y:scroll */
}

CSS 进阶版（标题固定在顶部） #

如果需要标题始终固定在页面顶部，内容滚动时不跟随，可以用以下样式：

html, body {
  margin: 0;
  padding: 0;
  padding-top: 40px; /* 预留标题高度，避免内容被遮挡 */
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.container {
  display: block;
}

#content-box {
  margin: 0 auto;
  max-width: 800px;
}

原理说明 #

1. 移除.container的max-height:100vh和flex布局，让容器不再限制高度，内容可以自然撑开页面。
2. 删除#content-box的overflow-y:scroll属性，当内容高度超过视窗时，浏览器会自动在窗口右侧生成滚动条。
3. 保留margin:0 auto确保内容居中，添加max-width可以优化大屏幕下的阅读体验。

内容的提问来源于stack exchange，提问作者user760900