实现水平滚动导航栏的自动对齐与高亮联动-js教程-PHP中文网

实现水平滚动导航栏的自动对齐与高亮联动

本文介绍如何利用 intersection observer 实现页面垂直滚动时，自动高亮并水平滚动到对应锚点链接的导航栏，确保导航项始终精准居中对齐当前可见标题。

本文介绍如何利用 intersection observer 实现页面垂直滚动时，自动高亮并水平滚动到对应锚点链接的导航栏，确保导航项始终精准居中对齐当前可见标题。

在构建单页长内容网站（如产品介绍、文档章节或作品集）时，常需一个固定定位的水平可滚动导航栏（.scrollableDiv），其内含多个锚点链接（如 <a href="#firstTitle">Hello1</a>），用于快速跳转至页面中不同 <h2></h2> 标题区域。用户期望不仅视觉上高亮当前活跃项（如变色），更希望该导航项自动滑入视口中央——即当 #firstTitle 进入视窗时，对应的 <a></a> 元素平滑滚动至 .scrollableDiv 的水平中心位置。

核心思路是：复用已有的 IntersectionObserver 逻辑，在 entry.isIntersecting === true 时，同步触发 .scrollableDiv 的 scrollLeft 更新，使其滚动至目标 <a></a> 元素的左偏移量（offsetLeft）减去其自身宽度一半（clientWidth / 2），从而实现“居中对齐”。

以下是完整、健壮的实现方案：

✅ 正确的 JavaScript 实现

const scrollableDiv = document.querySelector(".scrollableDiv");
const contentH2 = document.querySelectorAll("#content h2");

contentH2.forEach((element, index) => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          // 1. 高亮对应导航项（保持原逻辑）
          const navLinks = scrollableDiv.querySelectorAll("a");
          if (navLinks[index]) {
            navLinks[index].style.color = "brown";
            navLinks[index].style.fontWeight = "bold";
          }

          // 2. 水平滚动至该项居中（关键增强）
          const targetLink = navLinks[index];
          if (targetLink) {
            // 计算使 targetLink 水平居中的 scrollLeft 值
            const containerRect = scrollableDiv.getBoundingClientRect();
            const linkRect = targetLink.getBoundingClientRect();
            const scrollOffset = linkRect.left - containerRect.left - (containerRect.width / 2) + (linkRect.width / 2);

            // 平滑滚动（推荐）
            scrollableDiv.scrollTo({
              left: scrollOffset,
              behavior: "smooth"
            });
          }
        } else {
          // 清除高亮（可选：仅保留当前激活项高亮）
          const navLinks = scrollableDiv.querySelectorAll("a");
          if (navLinks[index]) {
            navLinks[index].style.color = "";
            navLinks[index].style.fontWeight = "";
          }
        }
      });
    },
    {
      rootMargin: "0px 0px -50% 0px", // 提前触发：标题进入视口下半部分即激活
      threshold: 0.1
    }
  );

  observer.observe(element);
});

? 关键注意事项

避免 scrollableDiv[index] 错误访问：原答案中 scrollableDiv[index] 是非法操作（scrollableDiv 是 Element，非数组），必须通过 querySelectorAll("a")[index] 或 children[index] 获取子元素。
使用 scrollTo({ left, behavior: "smooth" })：比直接赋值 scrollLeft 更现代、兼容性好，且支持平滑动画；若需兼容旧浏览器，可降级为 scrollableDiv.scrollLeft = value。
rootMargin 优化体验：设置 "-50% 0px" 可让观察器在标题刚进入视口下半部分时即触发，避免用户需将标题完全滚至顶部才激活，提升响应感。
样式补充建议：为 .scrollableDiv 添加 scroll-behavior: smooth（CSS），可使 href 跳转也具备平滑效果，与 JS 滚动行为一致：
```
.scrollableDiv {
  scroll-behavior: smooth; /* 配合 <a href="#id"> 跳转 */
  /* ... 其他原有样式 */
}</a>
```
性能提示：每个 <h2></h2> 创建独立 Observer 在多数场景可接受；若标题极多（>50），可考虑单一 Observer 监听所有 <h2></h2> 并批量处理，但本例结构清晰，无需过度优化。