Django-QCM锚点滚动异常：第二个索引后无响应问题排查

针对你遇到的「首次锚点点击正常，后续点击无反应，但控制台直接调用scrollToAnchor(3)可正常工作」的问题，核心原因是事件绑定失效或scroll snap特性干扰了滚动状态同步，以下是具体排查和修复步骤：

1. 检查事件绑定逻辑 #

如果你的锚点点击事件是通过addEventListener绑定的，确认是否使用了{once: true}参数——这个参数会让事件仅触发一次，直接导致后续点击失效：

• 错误示例：

  link.addEventListener('click', () => scrollToAnchor(id), {once: true});
  

• 修复后：

  link.addEventListener('click', () => scrollToAnchor(id));
  

如果用jQuery绑定，别用.one()，改用.on()确保事件可重复触发。

2. 阻止锚点默认行为 #

如果锚点是<a>标签，点击时的默认跳转行为（修改URL hash）会干扰scroll snap的状态，导致后续滚动计算出错，必须阻止：

document.querySelectorAll('.anchor-nav-item').forEach(item => {
  item.addEventListener('click', (e) => {
    e.preventDefault(); // 阻止默认跳转
    const targetId = item.dataset.target; // 假设用data-target存储章节ID
    scrollToAnchor(targetId);
  });
});

3. 修复scroll snap的状态同步 #

scroll snap的强制对齐特性可能会在滚动后锁定容器的scroll状态，导致后续scrollTo的计算失效，需要在滚动后手动触发scroll事件更新状态：

// 缓存滚动容器，避免重复DOM查询
const scrollContainer = document.getElementById('qcm-chapter-container');

function scrollToAnchor(anchorId) {
  const targetSection = document.getElementById(`chapter-${anchorId}`);
  if (!targetSection || !scrollContainer) return;

  scrollContainer.scrollTo({
    top: targetSection.offsetTop,
    behavior: 'smooth'
  });

  // 手动触发scroll事件，强制更新scroll snap状态
  scrollContainer.dispatchEvent(new Event('scroll'));
}

4. 确保CSS的scroll snap配置正确 #

错误的CSS配置会导致滚动状态异常，检查容器和章节的样式：

#qcm-chapter-container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh; /* 必须设置固定高度，否则scroll snap不生效 */
}

.qcm-chapter {
  scroll-snap-align: start;
  height: 100vh; /* 章节高度匹配容器，确保对齐 */
}

5. 动态元素用事件委托绑定 #

如果锚点是动态生成的（比如通过Django模板循环渲染），直接绑定在锚点元素上会失效，改用父容器的事件委托：

document.getElementById('anchor-nav-container').addEventListener('click', (e) => {
  if (!e.target.matches('.anchor-nav-item')) return;
  e.preventDefault();
  const targetId = e.target.dataset.target;
  scrollToAnchor(targetId);
});

内容的提问来源于stack exchange，提问作者Wlid El Bahdja