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

Question

假设我的网络中有 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