本文讲解如何在双栏布局中，使左侧导航点击后右侧内容区实现局部平滑滚动，关键在于将 scroll-behavior: smooth 正确应用到目标滚动容器（.scrollable-content），而非全局 html 或 body。
本文讲解如何在双栏布局中，使左侧导航点击后右侧内容区实现局部平滑滚动，关键在于将 `scroll-behavior: smooth` 正确应用到目标滚动容器（`.scrollable-content`），而非全局 `html` 或 `body`。
在典型的 50/50 分栏页面中（如个人简介页），左侧为固定导航栏，右侧为独立滚动区域（.scrollable-content），此时浏览器默认的 scroll-behavior: smooth 仅对整个视口生效——即当设置在 html 或 body 上时，它会尝试让整个页面平滑滚动到目标锚点，但本例中目标元素（如 #work）位于一个局部滚动容器内，而非文档根层级，因此全局设置无效。
✅ 正确做法是：将 scroll-behavior: smooth 应用于该局部滚动容器本身：
.scrollable-content {
height: calc(100% - 4rem);
overflow-y: scroll;
padding-right: 20px;
box-sizing: border-box;
-ms-overflow-style: none;
scrollbar-width: none;
scroll-behavior: smooth; /* ✅ 关键：启用容器内平滑滚动 */
}
/* 隐藏滚动条（视觉优化，不影响功能） */
.scrollable-content::-webkit-scrollbar {
display: none;
}⚠️ 注意事项：
-
scroll-behavior: smooth必须作用于具有overflow属性且实际发生滚动的容器，否则无效； - 不要移除
overflow-y: scroll（或auto），否则容器失去滚动能力，锚点跳转将失效； - 确保所有目标区块（如
<div id="work">）是 <code>.scrollable-content的直接或后代子元素，且 ID 唯一、与链接href值严格匹配（区分大小写）； - 无需额外 JavaScript：纯 CSS 方案兼容 Chrome 61+、Firefox 36+、Edge 79+、Safari 15.4+（caniuse 数据）；
- 若需兼容更老浏览器，可降级使用
Element.scrollIntoView({ behavior: 'smooth' })配合事件监听，但本例中 CSS 方案已足够简洁可靠。
总结：平滑滚动不是“全局开关”，而是“容器特性”。定位到正确的滚动上下文（.scrollable-content），赋予其 scroll-behavior: smooth，即可让锚点链接在该区域内自然、流畅地定位，完美契合分栏式单页设计需求。
