Question

我正在使用交叉观察器升级惰性加载滚动机制。我的滚动机制如下：

    function setScrollListener(callBack) {
    document.addEventListener('scroll', throttle(callBack, 1000));
}
const state = {};
function checkInViewport() {
    const offset = 400;
    state.unrendered = state.unrendered.filter(el => {
        const visible = isInViewport(el, offset)
        if (visible) {
            display(el);
        }
        return !visible;
    });
}

setScrollListener(checkInViewport)

在没有过多进入杂草的情况下，isInViewport使用提供的偏移量和提供的元素的getClientBoundRect来确定该元素是否在视口附近，以解决偏移量。本质上，这个元素400px是否来自视口？方法display仅显示元素。

现在使用相交观察器，我有这个：

const observeInViewport = (el, io) => {
    const { offset = 400 } = this.props;

    if (isInViewport(el, offset)) {
      display(el);
      io.unobserve(el);
    }
  }

const observationOpts = {
    root: null,
    rootMargin: '0px',
    threshold: 0.1,
};
const lazyRef = document.getElementsByClassName("lazy");
const io = new IntersectionObserver(([entry]) => {
    observeInViewport(entry.target, io);
}, observationOpts);
[].slice.call(lazyRef).forEach(el => {
    io.observe(el);
});

我正在使用相同的isInViewport和display方法使用偏移量，但是直到观察者使用时，偏移量才触发。观察者当然是由其阈值触发的。我不能提供理想的负阈值。我尝试使用documentElement作为我的root选项，然后提供rootMargin中的${(el.offsetTop - offset)}px 0px 0px 0px。那是一个字符串模板，但是这里的格式被打勾弄得一团糟。

我可以实现与滚动侦听器相同的偏移逻辑，但是可以观察到交集吗？如果您有任何问题，请告诉我。

带有交叉口观察器和偏移量的延迟加载

0 个答案: