Intersection Observer, когда элемент покидает область просмотра

Question

Есть ли способ определить, покидает ли элемент область просмотра с помощью Intersection Observers? Например, у меня есть элемент на экране, который я хочу вызвать обратный вызов, когда верхняя часть элемента достигает верхней части области просмотра. От MDN:

API Intersection Observer позволяет коду регистрировать функцию обратного вызова, которая выполняется всякий раз, когда элемент, который они хотят отслеживать, входит или выходит из другого элемента (или области просмотра), или когда сумма, на которую эти два пересекаются, изменяется на запрошенную величину. - ( https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)

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

var options = {
    root: document.querySelector('#element'),
    rootMargin: '0px',
    threshold: 0
}

var observer = new IntersectionObserver(callback, options);

Но кажется, что он срабатывает только тогда, когда верхняя часть элемента прокручивается и достигает нижней части области просмотра, но не одновременно. Идеи?

Answer 1

Если я правильно понимаю, что вы пытаетесь сделать, вы могли бы установить rootMargin в '0px 0px -100%', Также, threshold: 0 по умолчанию, поэтому вам не нужно включать его в ваш объект параметров.

Answer 2

Есть ли способ определить, покидает ли элемент область просмотра

Да. Так:

      var observer = new IntersectionObserver(function (entries) {
    if (!entries[0].isIntersecting) {
        console.log('Elvis has LEFT the building ');
    }
    else {
        console.log('Elvis has ENTERED the building ');
    }
});

observer.observe(document.querySelector("#Elvis"))

Объяснение

IntersectionObserver«срабатывает» каждый раз, когда наблюдаемый элемент входит или выходит из области просмотра. Т.е. стреляет и на "вход", и на "выход".

Если вы хотите знать, что бы ни случилось - проверьте.isIntersectingсобственностьentry.

Если false - элемент не пересекается, т.е. вышел из вида.

Если верно - значит элемент виден частично. Сколько "частично" - этоintersectionRatio.

PS Извините, мне захотелось добавить еще один ответ, более практичный.

Answer 3

Если вы пройдете через документ API здесь, threshold Опция может быть передана в виде массива, чтобы определить, на каких уровнях пересечения должен выполняться обратный вызов. Итак, прохождение что-то вроде [0, 0.8] Вызывает обратный вызов каждый раз, когда элемент видим, по крайней мере, на 80%, а также когда элемент не виден (выходит из области просмотра).

При этом могут быть и другие осложнения. Например, если имеется несколько элементов, всякий раз, когда один элемент является видимым, другой элемент может выйти из области просмотра, следовательно, запускать ненужные обратные вызовы. Я справился с этим, используя некоторые дополнительные if условия в моем случае. Я также должен был сделать несколько попыток, чтобы определить наиболее подходящие значения threshold а также intersectionRatio,