Свойство IntersectionObserver isIntersect никогда не будет ложным, если порог больше 0

Question

Если я настрою threshold значение чего-либо больше 0, isIntersecting никогда не возвращает false, когда цель покидает область просмотра. Однако, если я оставлю порог по умолчанию на 0, isIntersecting вернет false, когда цель покинет область просмотра. Смотрите пример ниже и удалите threshold: 1.0,

https://jsfiddle.net/snewcomer24/get0a4xr/1/

Это похоже на расходящееся поведение. У кого-нибудь есть объяснение этому поведению?

Answer 1

Это потому, что ваш обратный вызов наблюдателя вызывается только тогда, когда элемент пересекает пороговое соотношение.

По умолчанию порог равен 0, поэтому обратный вызов вызывается, когда элемент входит или покидает область просмотра. Когда вы изменяете порог на 1,0, ваш обратный вызов вместо этого вызывается, когда элемент становится видимым на 100% или перестает быть видимым на 100%.

Когда элемент перестанет быть на 100%, он будет примерно на 99% видимым и все еще isIntersecting как true, Затем, когда элемент покидает область просмотра, он не имеет отношения к вашему наблюдателю (поскольку ваш порог не равен 0), поэтому ваш обратный вызов больше не вызывается.

Если вы заботитесь о том, чтобы элемент стал видимым на 100% и покинул область просмотра, вы можете передать массив в качестве порога (например, [0, 1.0]) и ваш обратный вызов будет вызван при пересечении любого из этих соотношений.

https://jsfiddle.net/wzst4jx5/12/

В сторону: я изначально думал entry.isIntersecting был просто стенографией для entry.intersectionRatio > 0, Но я обнаружил, что Chrome (65) может сообщить isIntersecting как верно, но intersectionRatio как 0, когда что-то очень медленно входит в область просмотра.