检测特定div在react js的窗口视图部分是否仍然可见

如何解决检测特定div在react js的窗口视图部分是否仍然可见

假设我的网页中有 2 个 div 标签，默认窗口的视图是第一个 div，因为它出现在顶部。

参考图片，完整的正方形是文档可以向下滚动的高度。红色框是可以从设备看到的部分（例如：1024 x 608）。灰色部分是不再在视图中的部分。

在示例中，标签 Div 1 不再在视图中，因为文档已经滚动到中间。那么，在滚动时，我如何检测 Div 1 是否不再可见？

这是我到目前为止所做的：

const [scrollTop,setScrollTop] = useState(0);

useEffect(() => {
    var div_offset = document.getElementById('div1').offsetTop
    if (div_offset.top < window.innerHeight && div_offset.left < window.innerWidth) {
        console.log('still visible')
    } else {
        console.log('not anymore')
    }

    // below is to detect the window scroll
    function onScroll() {
        let currentPosition = window.pageYOffset;
        setScrollTop(currentPosition <= 0 ? 0 : currentPosition);
    }

    window.addEventListener("scroll",onScroll);
    return () => window.removeEventListener("scroll",onScroll);
},[scrollTop]);

当我滚动时，控制台总是显示 not anymore