通过将导航栏设为粘性定位、主体内容交由 body 原生滚动，并启用 scroll-behavior: smooth，即可实现鼠标在页面任意位置（包括导航栏、空白区）滚动时，平滑驱动内容区域滚动，且无需 JavaScript 干预。
通过将导航栏设为粘性定位、主体内容交由 body 原生滚动，并启用 `scroll-behavior: smooth`，即可实现鼠标在页面任意位置（包括导航栏、空白区）滚动时，平滑驱动内容区域滚动，且无需 javascript 干预。
在构建响应式开发者作品集网站时，常见的“左右分栏”布局（左侧固定导航 + 右侧长内容区）容易陷入一个交互陷阱：当内容区使用 overflow-y: auto 独立滚动时，用户必须将鼠标精准悬停在其内部才能触发滚轮滚动——这严重违背直觉，尤其在桌面端浏览时体验割裂。
根本问题在于：人为隔离了滚动上下文。你试图用 JavaScript 强行劫持全局 wheel 事件并手动更新 .scrollSection.scrollTop，但这种方式绕过了浏览器原生的滚动惯性、平滑插值和 scroll-behavior 控制，导致滚动卡顿、无缓动、无法与锚点跳转协同。
✅ 正确解法是「回归语义与原生行为」：
- 放弃 flexbox + 子容器滚动 的复杂嵌套；
-
让
承担主滚动职责（天然支持scroll-behavior: smooth和全局滚轮）； -
用 CSS
position: sticky固定导航栏，使其随页面滚动而“吸附”在视口顶部，视觉上仍保持左侧常驻； - 用 CSS Grid 替代 Flexbox 布局，更清晰地定义列宽与内容流。
以下是精简可靠的实现方案：
立即学习“Java免费学习笔记（深入）”；
/* 启用全站平滑滚动（关键！） */
html {
scroll-behavior: smooth;
}
/* 全局布局：两列网格，留出左右边距 */
body {
margin: 1em 10%;
display: grid;
grid-template-columns: 1fr 2fr; /* 左侧导航占 1 份，右侧内容占 2 份 */
gap: 1em;
height: auto; /* 移除 height: 100vh，允许 body 自然撑高 */
}
/* 导航区域：使用 sticky 实现“伪固定” */
nav {
background-color: antiquewhite;
padding: 1em;
}
nav > div {
position: sticky;
top: 1em; /* 距离视口顶部 1em，避免被浏览器地址栏遮挡 */
align-self: start; /* 确保 sticky 容器在网格中靠上对齐 */
}
/* 内容区域：无需 overflow，由 body 统一滚动 */
main {
background-color: darkgray;
}
/* 各锚点区块：设置高度与间距，确保可滚动 */
#about,
#experience,
#projects {
min-height: 500px;
background-color: silver;
padding: 1.5em 1em;
margin: 0.5em 0;
}<nav>
<div>
<a href="#about">ABOUT</a>
<a href="#experience">EXPERIENCE</a>
<a href="#projects">PROJECTS</a>
</div>
</nav>
<main>
<div id="about">
<h1>About</h1>
<p>你的关于介绍内容...</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11112" title="CSS工具箱(专业版)"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11112" title="CSS工具箱(专业版)">CSS工具箱(专业版)</a>
<p>全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p>
</div>
<a href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</div>
<div id="experience">
<h1>Experience</h1>
<p>你的工作经历...</p>
</div>
<div id="projects">
<h1>Projects</h1>
<p>你的项目展示...</p>
</div>
</main>? 关键优势说明：
- ✅ 全局滚轮生效：鼠标在导航栏、空白处、甚至
边缘滚动，均直接驱动body滚动，内容自然跟随； - ✅ 100% 保持 smooth scroll：
<a href="#id"></a>点击与滚轮滚动均走同一原生滚动管道，动画一致、无延迟； - ✅ 零 JavaScript 依赖：规避事件监听冲突、被动模式限制（
passive: false易被浏览器忽略）、滚动方向判断等兼容性陷阱； - ✅ 无障碍友好：符合屏幕阅读器对文档流与焦点滚动的预期，无需额外 ARIA 处理。
⚠️ 注意事项：
- 若需导航栏始终可见（即使页面顶部），请确保
top值合理（如top: 1em），避免被浏览器 UI 遮挡； -
sticky在部分旧版 Safari 中需加-webkit-sticky前缀（现代项目可忽略）； - 不要给
body或html设置height: 100vh或overflow: hidden，否则会截断滚动。
此方案不仅解决了当前问题，更提升了可维护性与性能——让 CSS 做它最擅长的事，把滚动交给浏览器，才是现代 Web 布局的优雅之道。
