本文详解如何在局部可滚动容器中启用平滑滚动，关键在于将 scroll-behavior: smooth 正确应用到目标滚动容器（如 .scrollable-content），而非全局 html 或 body。

本文详解如何在局部可滚动容器中启用平滑滚动，关键在于将 `scroll-behavior: smooth` 正确应用到目标滚动容器（如 `.scrollable-content`），而非全局 `html` 或 `body`。

在构建左右分栏式单页网站时，常需让左侧导航链接点击后，右侧独立滚动区域（非整页）平滑定位至对应锚点内容。但直接在 body, html 上设置 scroll-behavior: smooth 无法生效——因为该 CSS 属性仅对具有滚动能力的块级容器自身生效，且要求其内容实际溢出并触发滚动条。

在你的结构中，真正发生滚动的是 .scrollable-content 这个 overflow-y: scroll 容器，因此必须将平滑滚动行为显式赋予它：

.scrollable-content {
  height: calc(100% - 4rem);
  overflow-y: scroll;
  padding-right: 20px;
  box-sizing: border-box;
  -ms-overflow-style: none;   /* IE/Edge 隐藏滚动条 */
  scrollbar-width: none;      /* Firefox 隐藏滚动条 */
  scroll-behavior: smooth;    /* ✅ 关键：在此处启用平滑滚动 */
}

/* WebKit 内核浏览器（Chrome/Safari/Opera）隐藏滚动条 */
.scrollable-content::-webkit-scrollbar {
  display: none;
}

✅ 生效前提验证：

• 确保 .scrollable-content 内部内容总高度 > 其设定高度（即真实存在纵向滚动）；
• 所有锚点元素（如 <div id="work">）必须是 <code>.scrollable-content 的直接或嵌套子元素；
• 锚点链接 href 值（如 #work）需与目标元素 id 完全一致（大小写敏感、无空格）。

⚠️ 注意事项：

• scroll-behavior: smooth 是原生 CSS 方案，无需 JavaScript，兼容现代主流浏览器（Chrome 61+、Firefox 36+、Safari 15.4+、Edge 79+）；
• 若需支持旧版浏览器或更精细控制（如自定义缓动函数、滚动偏移、回调事件），可配合 Element.scrollIntoView() API 实现：

  document.querySelectorAll('.left-side a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
      e.preventDefault();
      const targetId = this.getAttribute('href').substring(1);
      const targetEl = document.getElementById(targetId);
      if (targetEl) {
        targetEl.scrollIntoView({
          behavior: 'smooth',
          block: 'start'
        });
      }
    });
  });

• 避免在 body 或 html 上重复设置 scroll-behavior: smooth，否则可能干扰页面级锚点跳转逻辑。

通过精准定位 scroll-behavior 的作用域，即可在保持布局解耦的同时，为局部滚动容器赋予流畅、专业的用户体验。