Javascript 我怎样才能看到我的卷轴是否达到了参考值？反应

我正在构建一个导航栏，如果用户滚动到广告，它会改变背景颜色。 以前，我使用了“window.scrollY”方法，如果它的数字超过700，就改变颜色。 不幸的是，这种方法对不同屏幕的响应很差

在我的navabr中，当我点击一个标题时，网站会自动滚动到该部分

我使用了引用来做这件事，我想知道您是否知道一种方法来检查滚动是否达到屏幕顶部的引用（以替换坏的颜色系统）

比如ref.current.isReached？返回一个布尔值。 有了它，我可以更好地更改css

我希望我是清楚的，我的英语很差

这是我使用ref系统的班级：

const Home=（{section}:Props）=>{
const sectionRef1:any=useRef（React.createRef（））；
const sectionRef2:any=useRef（React.createRef（））；
常量滚动=（参考：任意）=>{
ref.current.scrollIntoView({
行为：“平滑”，
块：“开始”，
});
};
功能滚动部分（部分：编号）{
如果（节===1）{
卷轴（参考1节）；
}
否则如果（节===2）{
卷轴（参考2节）；
}
否则如果（节===3）{
//TODO:活动按钮
}
}
useffect（（）=>{
滚动段（段）；
}，[第节]；
返回(
);
}
导出默认主页；

提前感谢

useffect（（）=>{
window.addEventListener（'scroll'，onScroll）；
return（）=>{
window.removeEventListener（'scroll'，onScroll）；
};
}, []);

在

onScroll

函数中，您可以使用

ref.current.getBoundingClientRect（）

---

这个库工作得非常好。还有IntersectionObserver，用于

useEffect

。