时间戳

首页 > 解决方案 > 我可以使用 IntersectionObserver 来检测元素相对于窗口底部的位置吗？

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

标签： javascriptintersection-observer

解决方案

是的你可以。

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

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

另外：如果你提供了一个threshold你0不应该有你描述的打嗝。

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

推荐阅读