如何实现页面滚动时完整切换Section并激活对应Tab

问题说明 #

滚动页面时，彩色Section无法完整显示，常停在两个Section之间；需实现滚动时自动切换到完整的Section，并同步激活对应Tab。

实现步骤 #

1. CSS修改：添加滚动吸附（Scroll Snap） #

给Section容器添加滚动吸附属性，强制每次滚动停在完整的Section上：

.sections {
  flex: 1;
  overflow-y: auto;
  /* 开启垂直方向强制滚动吸附 */
  scroll-snap-type: y mandatory;
}

.section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  transition: background 0.3s;
  /* 设置每个Section的吸附对齐点 */
  scroll-snap-align: start;
}

2. JavaScript优化：防抖处理+精准激活逻辑 #

优化滚动事件触发频率，调整激活判断规则，确保Section完全进入视口时才同步Tab状态：

document.addEventListener("DOMContentLoaded", () => {
  const links = document.querySelectorAll(".tabs ul li a");
  const sections = document.querySelectorAll(".section");
  let debounceTimer;

  // 防抖函数：避免滚动事件频繁触发
  function debounce(func, delay = 100) {
    return function() {
      clearTimeout(debounceTimer);
      debounceTimer = setTimeout(func, delay);
    };
  }

  // Tab点击跳转逻辑
  links.forEach((link) => {
    link.addEventListener("click", (event) => {
      event.preventDefault();
      const targetId = link.getAttribute("href").substring(1);
      const targetSection = document.getElementById(targetId);

      targetSection.scrollIntoView({
        behavior: "smooth",
        block: "start",
      });

      setActiveSection(targetId);
    });
  });

  // 设置激活的Section和Tab
  function setActiveSection(activeSectionId = null) {
    let currentActiveId = activeSectionId;

    if (!currentActiveId) {
      sections.forEach((section) => {
        const rect = section.getBoundingClientRect();
        // 当Section几乎完全占据视口时判定为激活
        if (rect.top <= 10 && rect.bottom >= window.innerHeight - 10) {
          currentActiveId = section.getAttribute("id");
        }
      });
    }

    // 更新Section的active类
    sections.forEach(section => {
      section.classList.toggle("active", section.id === currentActiveId);
    });

    // 更新Tab的active类
    links.forEach(link => {
      link.classList.toggle("active", link.getAttribute("href").slice(1) === currentActiveId);
    });
  }

  // 初始化+绑定防抖后的滚动事件
  setActiveSection();
  window.addEventListener("scroll", debounce(setActiveSection));
});

3. 可选：调整Tabs粘性定位 #

若需要Tabs始终固定在视口左侧，可修改.tabs的CSS：

.tabs {
  position: sticky;
  top: 0; /* 改为顶部固定 */
  width: 200px;
  background: #333;
  height: 100vh; /* 高度适配视口 */
  overflow-y: auto;
}

效果说明 #

• 滚动页面时，Section会自动吸附到视口顶部，不会停在两个Section之间
• Tab会自动同步当前显示的Section状态
• 点击Tab时，平滑滚动到对应Section并激活

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