点击锚点链接实现右侧滚动区平滑滚动的问题排查

问题描述 #

开发左右分栏网站，左侧为导航锚点链接，右侧是独立滚动的内容区域。点击左侧链接时，右侧内容区无法平滑滚动到对应板块，直接跳转无过渡效果。

原因分析 #

当前将scroll-behavior: smooth应用在body和html上，但实际可滚动的是.scrollable-content这个子容器。浏览器原生锚点跳转逻辑仅监听文档根节点（html/body）的滚动，不会作用于自定义的滚动子容器，因此平滑滚动不生效。

解决方案 #

方案1：纯CSS调整（简洁高效） #

将平滑滚动属性转移到实际滚动的子容器上，同时移除根节点的冗余设置：

1. 修改CSS，更新.scrollable-content样式：

.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;
}

2. 移除body, html上的scroll-behavior设置：

body, html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  /* 删除此行：scroll-behavior: smooth; */
}

方案2：JavaScript自定义控制（灵活定制） #

如果需要调整滚动偏移量或添加额外逻辑，可通过JS手动触发平滑滚动：

在HTML的</body>标签前添加以下脚本：

<script>
// 获取导航链接与滚动容器
const navLinks = document.querySelectorAll('nav ul li a');
const scrollContainer = document.querySelector('.scrollable-content');

navLinks.forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    const targetId = link.getAttribute('href').slice(1);
    const targetElement = document.getElementById(targetId);
    
    if (targetElement) {
      // 触发平滑滚动，可自定义偏移量
      scrollContainer.scrollTo({
        top: targetElement.offsetTop,
        behavior: 'smooth'
      });
    }
  });
});
</script>

如需调整滚动位置（比如避开顶部标题），只需修改top参数：

scrollContainer.scrollTo({
  top: targetElement.offsetTop - 30, // 向上偏移30px
  behavior: 'smooth'
});

效果验证 #

两种方案均可实现左侧导航点击后，右侧滚动区域平滑滚动到对应板块。方案1适合基础需求，方案2适合需要定制滚动逻辑的场景。

内容的提问来源于stack exchange，提问作者Prashil Shah