Ленивый груз с наблюдателем пересечения и смещением - PullRequest
Новая
       10

Ленивый груз с наблюдателем пересечения и смещением

0 голосов
/ 07 ноября 2018

Я модернизирую ленивый механизм прокрутки груза с помощью наблюдателя пересечения. Мой механизм прокрутки выглядит так: 

    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. Это строковый шаблон, но форматирование здесь перепутано с галочками.

Могу ли я добиться такой же логики смещения, как и со своим слушателем прокрутки, но с наблюдаемым пересечением? Дайте мне знать, если у вас есть какие-либо вопросы.

...