2

我正在使用交叉点观察器升级延迟加载滚动机制。我的滚动机制如下所示：

    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那是一个字符串模板，但是这里的格式被打勾了。

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

4

0 回答 0