更改滚动上的图标颜色，以便在react中进行垂直导航

Question

我正在构建一个具有垂直导航功能的react应用程序我正在尝试添加滚动图标颜色发生变化的功能卷轴是这样的在此处输入图像描述

有没有什么方法可以让你跟踪你目前在哪个部分做出反应？

Answer 1

您应该监听页面中的滚动事件。例如，当剖面穿过视口的中间时，请更改相应图标的颜色。您也可以使用IntersectionObserver

window.addEventListener('scroll', () => {
//watch for the window.scrollY changes and compare with the 
//section offset, when they intersects, change the colour of the 
//icon
})