通过将导航栏设为粘性定位、主体内容交由 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 布局，更清晰地定义列宽与内容流。
以下是精简可靠的实现方案：
/* 启用全站平滑滚动（关键！） */ 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> <div id="experience"> <h1>Experience</h1> <p>你的工作经历...</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill11112" title="CSS工具箱(专业版)"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="overflowclass">CSS工具箱(专业版)</a> <p class="overflowclass">全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p> </div> <a rel="nofollow" href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </div> <div id="projects"> <h1>Projects</h1> <p>你的项目展示...</p> </div> </main>? 关键优势说明：
- ✅ 全局滚轮生效：鼠标在导航栏、空白处、甚至
边缘滚动，均直接驱动body滚动，内容自然跟随； - ✅ 100% 保持 smooth scroll：
@#@#@#@#@#@#@#@#@#@0点击与滚轮滚动均走同一原生滚动管道，动画一致、无延迟； - ✅ 零 JavaScript 依赖：规避事件监听冲突、被动模式限制（
passive: false易被浏览器忽略）、滚动方向判断等兼容性陷阱； - ✅ 无障碍友好：符合屏幕阅读器对文档流与焦点滚动的预期，无需额外 ARIA 处理。
⚠️ 注意事项：
- 若需导航栏始终可见（即使页面顶部），请确保
top值合理（如top: 1em），避免被浏览器 UI 遮挡； -
sticky在部分旧版 Safari 中需加-webkit-sticky前缀（现代项目可忽略）； - 不要给
body或html设置height: 100vh或overflow: hidden，否则会截断滚动。
此方案不仅解决了当前问题，更提升了可维护性与性能——让 CSS 做它最擅长的事，把滚动交给浏览器，才是现代 Web 布局的优雅之道。
- 用 CSS
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
