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

Question

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

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 看起来更干净（并且触发频率更低）。

Answer 1

是的，你可以。

看看这个：https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer

您可以创建一个 IntersectionObserver 并提供一个自定义 root 属性对应于大于视口的元素（例如 height: 200vh）。

此外：如果您提供 0 的 threshold，您就不应该出现您描述的问题。

您可以做的另一件事是设置 100% 的 rootMargin 以指示边距是一个全新的视口。

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

Can I use IntersectionObserver to detect where an element is with respect to bottom of window?

javascript

intersection-observer