React应用中实现滚动导航高亮：Waypoint与自定义监听器实践

import React, { useState, useEffect } from 'react';
import { Waypoint } from 'react-waypoint';
import { Box, Grid } from '@mui/material';
// 假设 Navbar 组件接收一个 currentSectionId prop 来高亮显示
import Navbar from './Navbar'; 

const ScrollHighlightWithWaypoint = () => {
  const [currentSection, setCurrentSection] = useState(1); // 默认显示第一章节

  useEffect(() => {
    // 当 currentSection 更新时，可以在这里执行其他逻辑
    // 例如，通知 Navbar 更新高亮状态
    console.log("当前可见章节的序号是:", currentSection);
    // 实际应用中，你可能通过 prop 将 currentSection 传递给 Navbar
    // <Navbar currentSectionId={currentSection} />
  }, [currentSection]);

  return (
    <Box>
      <Navbar currentSectionId={currentSection} /> {/* 传递当前章节ID */}

      {/* Waypoint 1: 用于 Section 1 */}
      <Waypoint
        onEnter={() => setCurrentSection(1)}
        // onLeave 等事件也可以根据需要配置
      />
      <Grid
        container
        display={"flex"}
        flexDirection={"column"}
        minHeight={"100vh"}
        justifyContent={"space-between"}
        style={{ height: "800px", background: "red" }}
      >
        <div>章节 1</div>
      </Grid>

      {/* Waypoint 2: 用于 Section 2 */}
      <Waypoint
        onEnter={() => setCurrentSection(2)}
      />
      <Grid
        container
        display={"flex"}
        flexDirection={"column"}
        minHeight={"100vh"}
        justifyContent={"space-between"}
        style={{ height: "800px", background: "white" }}
      >
        <div>章节 2</div>
      </Grid>

      {/* Waypoint 3: 用于 Section 3 */}
      <Waypoint
        onEnter={() => setCurrentSection(3)}
      />
      <Grid
        container
        display={"flex"}
        flexDirection={"column"}
        minHeight={"100vh"}
        justifyContent={"space-between"}
        style={{ height: "800px", background: "green" }}
      >
        <div>章节 3</div>
      </Grid>
    </Box>
  );
};

export default ScrollHighlightWithWaypoint;

import React, { useRef, useState, useEffect } from 'react';
import { Box, Grid } from '@mui/material';
// 假设 Navbar 组件接收一个 currentSectionId prop 来高亮显示
import Navbar from './Navbar'; 

const ScrollHighlightWithRef = () => {
  const sectionRefs = {
    section1: useRef(null),
    section2: useRef(null),
    section3: useRef(null),
  };
  const [currentSectionId, setCurrentSectionId] = useState('section1'); // 默认显示第一章节

  // 滚动处理函数
  const handleScroll = () => {
    const scrollPosition = window.scrollY || document.documentElement.scrollTop;
    const windowHeight = window.innerHeight;

    let activeSectionId = 'section1'; // 默认值

    // 遍历所有章节，判断哪个章节在视口内
    for (const key in sectionRefs) {
      const sectionElement = sectionRefs[key].current;
      if (sectionElement) {
        const sectionTop = sectionElement.offsetTop;
        const sectionHeight = sectionElement.offsetHeight;

        // 判断章节是否在当前视口内（至少一部分可见）
        // 这里可以根据需求调整判断逻辑，例如：
        // - 章节顶部进入视口：scrollPosition >= sectionTop
        // - 章节中心进入视口：scrollPosition + windowHeight / 2 >= sectionTop && scrollPosition + windowHeight / 2 < sectionTop + sectionHeight
        // - 章节完全进入视口：scrollPosition <= sectionTop && scrollPosition + windowHeight >= sectionTop + sectionHeight
        if (scrollPosition >= sectionTop - windowHeight / 3 && scrollPosition < sectionTop + sectionHeight - windowHeight / 3) {
          activeSectionId = sectionElement.id;
          break; // 找到第一个符合条件的章节即可
        }
      }
    }

    // 只有当当前章节ID发生变化时才更新状态，避免不必要的渲染
    if (activeSectionId !== currentSectionId) {
      setCurrentSectionId(activeSectionId);
    }
  };

  // 挂载时添加滚动事件监听器，卸载时移除
  useEffect(() => {
    // 初始设置当前章节，例如滚动到顶部时默认第一章高亮
    if (sectionRefs.section1.current) {
      setCurrentSectionId(sectionRefs.section1.current.id);
    }
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []); // 空依赖数组确保只在组件挂载和卸载时执行

  // 当 currentSectionId 更新时，可以在这里执行其他逻辑
  useEffect(() => {
    console.log("当前可见章节的ID是:", currentSectionId);
    // 实际应用中，你可能通过 prop 将 currentSectionId 传递给 Navbar
    // <Navbar currentSectionId={currentSectionId} />
  }, [currentSectionId]);

  return (
    <div className="App">
      <Navbar currentSectionId={currentSectionId} /> {/* 传递当前章节ID */}

      <Box>
        <Grid
          container
          display={"flex"}
          flexDirection={"column"}
          minHeight={"100vh"}
          justifyContent={"space-between"}
        >
          <Grid
            id="section1"
            item
            flexGrow={1}
            style={{ height: "800px", background: "red" }}
            ref={sectionRefs.section1}
          >
            <div>章节 1</div>
          </Grid>
          <Grid
            id="section2"
            item
            flexGrow={1}
            style={{ height: "800px", background: "white" }}
            ref={sectionRefs.section2}
          >
            <div>章节 2</div>
          </Grid>
          <Grid
            id="section3"
            item
            flexGrow={1}
            style={{ height: "800px", background: "green" }}
            ref={sectionRefs.section3}
          >
            <div>章节 3</div>
          </Grid>
        </Grid>
      </Box>
    </div>
  );
};

export default ScrollHighlightWithRef;