带锚点链接的水平滚动：div缩放时锚点定位异常问题

问题背景 #

我尝试用锚点链接触发不同的水平滚动div显示，主容器内的子元素均为固定宽高以填充主容器，开启了overflow-x属性。子元素彼此垂直堆叠，点击锚点本应仅显示对应子元素，但窗口缩放时，锚点无法保持在主容器左上角，导致所有隐藏子元素被显示出来。

• 问题截图：
• 问题演示动图：

原有核心代码示例 #

<div class="main-container">
  <div id="section1" class="section">Section 1</div>
  <div id="section2" class="section">Section 2</div>
  <div id="section3" class="section">Section 3</div>
</div>

<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>

.main-container {
  width: 100%;
  height: 300px;
  overflow-x: auto;
  white-space: nowrap;
}

.section {
  display: inline-block;
  width: 100%;
  height: 100%;
  white-space: normal;
}

方案一：纯CSS修复锚点定位 #

核心是将锚点的定位基准绑定到主容器，而非整个文档：

1. 给主容器设置相对定位，作为内部元素的定位参考
2. 利用scroll-snap属性强制滚动对齐，确保锚点始终对齐容器左上角

修改后的CSS：

.main-container {
  position: relative;
  width: 100%;
  height: 300px;
  overflow-x: auto;
  white-space: nowrap;
  scroll-snap-type: x mandatory; /* 强制水平滚动对齐 */
}

.section {
  display: inline-block;
  width: 100%;
  height: 100%;
  white-space: normal;
  scroll-snap-align: start; /* 对齐容器起始位置 */
}

html {
  scroll-padding: 0; /* 消除默认滚动内边距影响 */
}

此方案通过滚动对齐规则，确保窗口缩放时，锚点对应的子元素始终贴合主容器左上角，不会出现其他子元素溢出显示的问题。

方案二：JavaScript精准控制滚动 #

若纯CSS方案仍有兼容性或场景适配问题，用JS直接控制滚动位置更可靠：

实现代码 #

<!-- 导航链接 -->
<a href="#section1" class="nav-link">Section 1</a>
<a href="#section2" class="nav-link">Section 2</a>
<a href="#section3" class="nav-link">Section 3</a>

<!-- 主容器 -->
<div class="main-container" id="mainContainer">
  <div id="section1" class="section">Section 1</div>
  <div id="section2" class="section">Section 2</div>
  <div id="section3" class="section">Section 3</div>
</div>

/* 保持原有容器和子元素样式 */
.main-container {
  width: 100%;
  height: 300px;
  overflow-x: auto;
  white-space: nowrap;
}

.section {
  display: inline-block;
  width: 100%;
  height: 100%;
  white-space: normal;
}

const navLinks = document.querySelectorAll('.nav-link');
const mainContainer = document.getElementById('mainContainer');

navLinks.forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault(); // 阻止默认锚点跳转
    const targetId = link.getAttribute('href').substring(1);
    const targetSection = document.getElementById(targetId);
    
    // 计算目标元素相对于主容器的水平偏移量
    const offsetLeft = targetSection.offsetLeft;
    
    // 平滑滚动到目标位置（可去掉behavior: 'smooth'改为即时滚动）
    mainContainer.scrollTo({
      left: offsetLeft,
      behavior: 'smooth'
    });
  });
});

该方案通过直接获取子元素的实际偏移量来控制主容器的滚动位置，完全不受窗口缩放影响，适配所有场景。

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