如何实现页面整体垂直滚动，仅Projects区块可单独水平滚动？

没问题，这其实是个很常见的布局需求，核心就是把水平滚动的范围精准限制在Projects区块内，同时保留页面整体的垂直滚动能力。我先帮你分析原代码的问题，再给出修改后的完整方案：

原代码的问题 #

你原来给.container加了overflow-x: scroll，这会导致整个页面容器都能水平滚动，而不是只限制在Projects区块——这显然不是你想要的效果。

修改后的完整代码 #

CSS 部分 #

/* 页面整体容器：只允许垂直滚动，锁定水平方向 */
.container {
  width: 500px;
  height: 100vh; /* 用视口高度确保占满屏幕，方便测试垂直滚动 */
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
  overflow-x: hidden; /* 完全禁止整体水平滚动 */
  background-color: lightgrey;
  padding: 20px;
}

/* Projects专属容器：负责控制局部水平滚动 */
.projects-scroll-wrapper {
  overflow-x: auto; /* 内部内容超出时显示水平滚动条 */
  overflow-y: hidden; /* 垂直方向不允许滚动，避免干扰 */
  padding-bottom: 10px; /* 给滚动条留一点空间，防止遮挡内容 */
}

/* Projects内容区：确保项目横向排列不换行 */
.projects {
  display: flex; /* 用flex布局实现稳定的横向排列（比float更可靠） */
  gap: 20px; /* 控制项目之间的间距，替代margin更方便 */
  flex-wrap: nowrap; /* 强制所有项目在一行，触发水平滚动 */
  min-width: max-content; /* 自动适配所有项目的总宽度，不用手动算固定值 */
}

/* 单个项目样式 */
.project {
  width: 300px;
  background-color: grey;
  padding: 15px; /* 加内边距让内容更美观 */
}

HTML 部分 #

<div class="container">
  <h1>Page</h1>
  <div class="main">
    <h2>Main</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <!-- 多加一些文本，方便测试整体垂直滚动 -->
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

  <!-- 新增的滚动包裹层：专门控制Projects的水平滚动 -->
  <div class="projects-scroll-wrapper">
    <div class="projects">
      <h2>Projects</h2>
      <div class="project">
        <p>Project 1</p>
      </div>
      <div class="project">
        <p>Project 2</p>
      </div>
      <div class="project">
        <p>Project 3</p>
      </div>
      <div class="project">
        <p>Project 4</p>
      </div>
    </div>
  </div>

  <!-- 底部内容，测试整体垂直滚动 -->
  <div class="footer">
    <h2>Footer</h2>
    <p>Footer content here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

关键实现要点 #

1. 锁定整体水平滚动：给.container设置overflow-x: hidden，确保页面整体只能上下滚动，不能左右滑动。
2. 局部水平滚动容器：新增的.projects-scroll-wrapper是核心，通过overflow-x: auto让内部超出宽度的内容触发水平滚动，overflow-y: hidden避免垂直方向出现多余滚动条。
3. 稳定的横向排列：用Flex布局的flex-wrap: nowrap强制项目在一行排列，比传统的float+inline-block更稳定，还能通过gap轻松控制间距。
4. 自适应宽度：min-width: max-content让.projects自动适应所有项目的总宽度，不用手动计算固定宽度，扩展性更强。

可选兼容方案（如果需要支持旧浏览器） #

如果必须用inline-block替代Flex，可以这样调整.projects和.project的样式：

.projects {
  font-size: 0; /* 消除inline-block元素之间的空格间隙 */
  white-space: nowrap; /* 强制不换行 */
}

.project {
  display: inline-block;
  width: 300px;
  background-color: grey;
  padding: 15px;
  margin-right: 20px;
  font-size: 16px; /* 恢复字体大小 */
}

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