横向滚动网站锚点异常：跳转第4节返回第1节求助

问题原因分析 #

横向滚动场景下，锚点跳转的核心依赖浏览器对目标元素滚动位置的正确计算。当容器或section的宽度未正确设置时，浏览器无法识别完整的滚动范围，就会出现部分锚点跳转定位错误——比如你遇到的点击section3锚点跳转到section4却回到section1，以及最初3个section时无法跳转至section3的情况，本质都是滚动容器的宽度计算异常，导致目标section的实际位置不在浏览器预期的滚动范围内。

具体修复步骤 #

• 设置滚动容器的明确总宽度
  给横向滚动容器设置等于所有section宽度总和的数值，确保浏览器能识别完整的滚动空间。假设每个section宽度为100vw，4个section的容器宽度应为calc(100vw * 4)：

  .scroll-container {
    width: calc(100vw * 4);
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* 可选，提升滚动定位的精准度 */
  }
  

• 固定每个section的宽度并禁止压缩
  确保每个section保持独立宽度，不会被flex布局压缩：

  section {
    width: 100vw;
    flex-shrink: 0;
    scroll-snap-align: start; /* 配合scroll-snap，让锚点跳转更精准对齐 */
  }
  

• 验证锚点链接的正确性
  确认所有锚点的href属性正确对应目标section的ID，避免拼写错误：

  <!-- section3内的正确锚点示例 -->
  <a href="#section4">跳转到section4</a>
  

• 自定义锚点滚动行为（可选，解决默认行为冲突）
  如果使用了自定义JS控制滚动，可阻止浏览器默认锚点行为，手动计算并滚动到目标位置：

  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
      e.preventDefault();
      const target = document.querySelector(this.getAttribute('href'));
      if (target) {
        document.querySelector('.scroll-container').scrollTo({
          left: target.offsetLeft,
          behavior: 'smooth'
        });
      }
    });
  });
  

关于section数量变化导致的现象解释 #

最初仅3个section时，滚动容器未设置明确宽度，浏览器无法计算出足够的溢出宽度，导致section3的位置不在可滚动范围内，无法跳转；添加section4后，容器的自然宽度被撑开，刚好覆盖了前3个section的位置，因此section1到section3的跳转暂时可用，但section4的位置仍超出了浏览器正确识别的滚动范围，最终导致跳转时错误回到section1。

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