本文详细介绍了在react应用中实现滚动时动态高亮导航栏当前章节的两种主要方法。首先，探讨了如何正确利用`react-waypoint`组件，通过在每个章节前放置`waypoint`并监听其`onenter`事件来更新当前可见章节状态。其次，提供了另一种基于原生滚动事件监听和`useref`钩子的解决方案，通过计算滚动位置和章节的dom偏移量来精确判断当前可见章节。两种方法均附带详细代码示例，并讨论了实现细节与注意事项。
在构建单页应用（SPA）或长页面时，用户体验的一个关键方面是提供一个能够实时反映当前滚动位置的导航栏。这意味着当用户滚动页面时，导航栏中对应的章节链接应自动高亮显示。本文将探讨两种在React中实现这一功能的有效策略：利用react-waypoint库和采用原生的滚动事件监听与useRef钩子。
1. 使用 react-waypoint 实现滚动高亮
react-waypoint是一个轻量级的React组件，用于在元素进入或离开视口时触发回调。它非常适合实现懒加载、无限滚动或像滚动监听（scrollspy）这样的功能。
1.1 react-waypoint 的基本原理
Waypoint组件本身是一个不可见的占位符。当这个占位符进入或离开视口时，它会触发相应的回调函数，如onEnter、onLeave等。通过将Waypoint放置在页面的不同区域，我们可以精确地知道用户何时滚动到或离开了某个特定区域。
1.2 正确使用 react-waypoint
为了实现章节高亮，我们需要在每个需要被追踪的章节之前放置一个Waypoint组件。当用户滚动到某个章节时，该章节前的Waypoint的onEnter事件会被触发，此时我们可以更新一个状态来指示当前可见的章节。
示例代码：
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;注意事项：
- Waypoint组件应该放置在它所代表的章节的上方或内部的起始位置，以便在章节进入视口时能及时触发onEnter。
- onEnter回调在Waypoint进入视口时触发。如果需要更精细的控制，例如当章节的某个百分比进入视口时才触发，可以配置bottomOffset、topOffset等属性。
- react-waypoint适用于大多数场景，但如果需要非常复杂的逻辑或对性能有极致要求（尽管react-waypoint本身已经做了优化），可以考虑下面的原生方案。
2. 基于原生滚动事件和 Ref 实现
另一种方法是利用浏览器原生的滚动事件监听器和React的useRef钩子来直接操作和检测DOM元素的位置。这种方法提供了最大的灵活性和控制力，但可能需要编写更多的代码。
2.1 核心思路
- 使用useRef为每个章节的DOM元素创建引用。
- 在组件挂载时，添加一个全局的滚动事件监听器。
- 在滚动事件回调中，获取当前滚动位置和每个章节的DOM位置信息。
- 根据这些信息判断哪个章节当前可见，并更新状态。
- 在组件卸载时，移除滚动事件监听器以防止内存泄漏。
2.2 实现步骤与代码
示例代码：
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;注意事项：
- 性能优化： 滚动事件在短时间内会触发多次，频繁地更新状态可能导致性能问题。建议对handleScroll函数进行节流（throttle）或防抖（debounce）处理。例如，可以使用lodash.throttle或自定义的节流函数。
- 精确判断： sectionTop - windowHeight / 3 这样的偏移量是为了让章节在进入视口一定距离后才被认为是“当前章节”，避免导航栏频繁切换。你可以根据实际需求调整这个偏移量或判断逻辑。
- Ref的正确使用： 确保ref属性被正确地绑定到实际的DOM元素上，而不是React组件实例。
- 响应式设计： window.innerHeight会随着视口大小变化，offsetTop和offsetHeight也会受CSS布局影响。确保在不同屏幕尺寸下都能正常工作。
3. 两种方案的比较与选择
| 特性 | react-waypoint | 原生滚动事件 + Ref |
|---|---|---|
| 易用性 | 较高，API简洁，开箱即用 | 较低，需要手动管理DOM和事件监听 |
| 控制力 | 适中，通过offset等属性进行微调 | 极高，可以实现任何复杂的判断逻辑 |
| 性能 | 良好，内部已做优化 | 需手动优化（节流/防抖），否则可能引发性能问题 |
| 代码量 | 较少 | 较多 |
| 适用场景 | 快速实现懒加载、无限滚动、基础滚动监听 | 需要高度定制化、精确控制或不引入额外库的场景 |
选择建议：
- 对于大多数常见的滚动高亮需求，react-waypoint提供了一个更简洁、更易于维护的解决方案。
- 如果你的项目对性能有极致要求，或者需要非常复杂的逻辑来判断“当前章节”（例如，根据章节内容的可见百分比、用户停留时间等），那么使用原生滚动事件和useRef会提供更大的灵活性。在这种情况下，务必记得对滚动事件进行节流或防抖处理。
总结
实现React应用中的滚动导航高亮功能，无论是通过react-waypoint库的便捷性，还是利用原生DOM操作的强大控制力，核心都在于准确识别当前用户正在查看的页面区域，并据此更新UI状态。选择哪种方法取决于项目的具体需求、对第三方库的接受程度以及对性能优化的考量。掌握这两种技术，将使你能够为用户提供更流畅、更直观的导航体验。
