Javascript 我可以使用IntersectionObserver来检测元素相对于窗口底部的位置吗？

现在，当屏幕底部的一个元素变得可见时，我可以管理图像的延迟加载，如下所示：

let options = { rootMargin: '0px', threshold: 0.1 }
let callback = (entries, observer) => {
    console.log(entries[0]);
    var bar = entries[0];
    
    if (entries.filter(entry => entry.isIntersecting).length) {
         // load images    
    }
};
let observer = new IntersectionObserver(callback, options);
observer.observe(document.querySelector('#bottombar'))

然而，这意味着新图像只有在到达底部时才会加载，这给交互带来了一种打嗝的感觉

例如，当元素低于屏幕底部的全屏高度（或更低）时，是否可能触发事件？我想这可以通过滚动事件来完成，但IntersectionObserver看起来更干净（而且触发频率更低）。

是的，你可以

看看这个：

您可以创建一个

IntersectionObserver

，并提供一个自定义

根属性，该属性对应于大于视口的元素（例如
高度：200vh
）

另外：如果您提供的
阈值
为
0
，则不应出现您描述的打嗝

您可以做的另一件事是将
rootMargin
设置为
100%
，以指示边距是一个全新的视口。
完美！将rootMargin设置为1600px不起作用