React实现滚动到区块时更新URL锚点及导航激活状态

核心思路 #

通过监听页面滚动事件，判断当前视口中的目标区块，同步更新URL锚点和导航的active类，结合React-Bootstrap的Nav.Link组件实现状态绑定。

具体实现步骤 #

1. 定义区块配置与状态

先整理所有需要监听的区块信息，用useState管理当前激活的区块ID：

import { useState, useEffect, useCallback } from 'react';
import { Nav } from 'react-bootstrap';

// 区块配置：ID对应锚点，label对应导航文本
const sections = [
  { id: 'section-1', label: '区块1' },
  { id: 'section-2', label: '区块2' },
  { id: 'section-3', label: '区块3' },
];

function App() {
  const [activeSection, setActiveSection] = useState('section-1');

2. 编写滚动监听逻辑

用防抖函数减少滚动事件触发频率，滚动时计算每个区块的位置，判断当前可见的区块：

// 防抖函数：控制事件触发频率
  const debounce = (func, delay) => {
    let timer;
    return (...args) => {
      clearTimeout(timer);
      timer = setTimeout(() => func.apply(this, args), delay);
    };
  };

  // 判断当前视口中的目标区块
  const handleScroll = useCallback(debounce(() => {
    const scrollPosition = window.scrollY + 100; // 加阈值提前触发切换

    const currentSection = sections.find(section => {
      const element = document.getElementById(section.id);
      if (!element) return false;
      const { offsetTop, offsetHeight } = element;
      return scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight;
    });

    if (currentSection && currentSection.id !== activeSection) {
      setActiveSection(currentSection.id);
      // 更新URL锚点，不触发页面刷新
      window.history.replaceState(null, '', `#${currentSection.id}`);
    }
  }, 100), [activeSection]);

3. 绑定与清理滚动监听

用useEffect添加滚动监听，组件卸载时移除监听避免内存泄漏：

useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [handleScroll]);

4. 渲染导航与页面区块

将Nav.Link的active属性绑定到当前激活状态，同时处理点击跳转逻辑：

return (
    <>
      {/* 头部导航 */}
      <Nav className="bg-light p-3">
        {sections.map(section => (
          <Nav.Link
            key={section.id}
            href={`#${section.id}`}
            active={activeSection === section.id}
            onClick={(e) => {
              // 阻止默认跳转，手动控制状态与滚动
              e.preventDefault();
              setActiveSection(section.id);
              window.history.replaceState(null, '', `#${section.id}`);
              // 平滑滚动到目标区块
              document.getElementById(section.id).scrollIntoView({ behavior: 'smooth' });
            }}
          >
            {section.label}
          </Nav.Link>
        ))}
      </Nav>

      {/* 页面区块 */}
      {sections.map(section => (
        <div
          key={section.id}
          id={section.id}
          style={{
            height: '100vh',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            fontSize: '2rem',
            borderBottom: '1px solid #eee',
          }}
        >
          {section.label}
        </div>
      ))}
    </>
  );
}

export default App;

关键细节说明 #

• 防抖处理：滚动事件会高频触发，防抖（延迟100ms）可减少状态更新次数，优化性能。
• 阈值设置：scrollPosition + 100让区块接近视口顶部时就触发状态切换，提升交互流畅度。
• 手动点击控制：阻止默认跳转行为，改用scrollIntoView实现平滑滚动，同时同步状态与URL。

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