如何让flexbox溢出子元素在页面任意位置响应滚轮滚动？

核心方案：转移页面滚动行为到内容盒 #

别再用滚轮事件强制修改滚动位置了——直接把页面整体的滚动权限交给内容盒，让body和html完全不可滚动，这样不管鼠标在导航栏、边距还是页面任何地方，滚轮都会自动作用到内容盒上，同时完美保留原生平滑滚动和锚点跳转的效果。

具体实现步骤 #

1. 锁定页面整体滚动
   给html和body设置样式，禁止自身滚动：

html, body {
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

2. 配置内容盒为可滚动容器
   在你的flex布局里，给右侧内容盒加上这些样式：

.content-box {
  flex: 1; /* 占据body剩余的全部宽度 */
  height: 100vh; /* 高度和视口保持一致 */
  overflow-y: auto; /* 开启垂直滚动 */
  scroll-behavior: smooth; /* 让锚点跳转和JS触发的滚动平滑 */
}

这里要注意：原生滚轮的平滑效果是浏览器自带的，只要你不手动拦截滚轮事件，就会自动保留；scroll-behavior: smooth负责的是锚点跳转、scrollTo这类主动触发的滚动的平滑性。

3. 确保锚点指向内容盒内的元素
   导航栏的锚点链接要对应内容盒里的区块，比如：

<nav class="nav-bar">
  <a href="#about-me">关于我</a>
  <a href="#projects">项目展示</a>
</nav>
<div class="content-box">
  <section id="about-me">...</section>
  <section id="projects">...</section>
</div>

浏览器会自动识别内容盒是滚动容器，点击锚点时会平滑滚动到目标区块。

为什么这个方法比监听滚轮事件好？ #

• 完全利用浏览器原生滚动机制，不会出现滚轮卡顿、失去平滑感的问题。
• 不需要写复杂的JS事件处理，代码更简洁，兼容性也更好。
• 天然支持全局滚轮控制，不管鼠标在页面哪个区域，滚轮都会作用到内容盒。

需要注意的坑 #

• 别用wheel事件手动修改scrollTop，这会覆盖浏览器的原生滚动逻辑，直接毁掉平滑效果。
• 确保内容盒的高度设置正确，必须让它的内容超出自身高度才会触发滚动，100vh是最稳妥的选择（和视口高度一致）。

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