Intersection Observer when element leaves the viewport

Question

Is there a way to detect if an element leaves the viewport using Intersection Observers? For example, I have an element on the screen that I want to fire a callback when the top of the element hits the top of the viewport. From MDN:

The Intersection Observer API lets code register a callback function that is executed whenever an element they wish to monitor enters or exits another element (or the viewport), or when the amount by which the two intersect changes by a requested amount. -- (https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)

So if I do something like below, I would have thought that the callback would have fired when the top of the element hit the top of the viewport as well?

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

var observer = new IntersectionObserver(callback, options);

But it only seems to be firing when the top of the element scrolls in and hits the bottom of the viewport, but not both. Ideas?

score 20 · Answer 1 · answered Feb 25 '19 at 20:37

20

If I correctly understand what you're trying to do, you could set rootMargin to '0px 0px -100%'. Also, threshold: 0 is the default, so you don't need to include it in your options object.

answered Feb 25 '19 at 20:37

Jonathan Melin

201
2
3

4

This was really helpful, but I was having a difficult time understanding why it was working. [This article](https://css-tricks.com/an-explanation-of-how-the-intersection-observer-watches/) helps a lot in the section where it discusses sticky elements. – snyderxc Mar 19 '21 at 21:01

Pragun · Answer 2 · 2019-03-15T10:08:42.627

8

If you go through the API doc here, the threshold option can be passed as an array to define on what levels of intersection should the callback be fired. So, passing something like [0, 0.8] fires the callback each time the element is visible by at least 80% and also when the element is not visible (exits the viewport).

There might be other complications while doing this. For e.g. if there are multiple elements, whenever one element is visible, other element might exit the viewport hence firing unnecessary callbacks. I handled it using some additional if conditions in my case. I also had to do some hit and trials to determine the best suitable values of threshold and intersectionRatio.

edited Mar 15 '19 at 10:08

answered Mar 15 '19 at 10:00

Pragun

1,123
8
20

awesome, you have made `if` test to appreciate which `div` was in action or something like that? to me precise other threshold continue to observe only the bottom side of the element it seems – Webwoman May 15 '19 at 22:28
yeah I had to check which div inside the viewport should actually be considered using if condition. I also had to consider the direction of the scroll in order to do that. – Pragun May 16 '19 at 05:42
1

Actually I think that a 0 threshold value means "any amount" of the observed will fire the callback. I found this question because I have the same question. I'll need to do some testing, but I think my question is "does interseationobserver fire when an observed EXITS the root area" – Ted Fitzpatrick Jan 13 '20 at 17:43
The callback will fire when the intersectionRatio passes the threshold, either forwards or backwards. So, with a threshold of 0, the callback will fire when the ratio is greater than 0 AND again when the ratio is 0. So to answer your question, if the threshold is 0, the intersection observer WILL fire when an observed element exits the root area. If the threshold is 0.5, the intersection observer will fire when 50% of the element enters the viewport AND when 50% of the element leaves the viewport. – Laurel Thomson Jan 31 '20 at 19:03

Alex from Jitbit · Answer 3 · 2022-10-05T07:28:08.793

Is there a way to detect if an element leaves the viewport

Yes. Like this:

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"))

Explanation

IntersectionObserver "fires" every time the observed element enters or exits the viewport. I.e. it fires on both the "entrance" and the "exit".

If you want to know, whichever happened - check the .isIntersecting property of the entry.

If it's false - the element is not intersecting, i.e. it left the view.

If it's true - it means the element is partially visible. How much is "partially" - is the intersectionRatio.

P.S. Sorry I felt like adding another answer, a more practical one

Intersection Observer when element leaves the viewport

3 Answers3

Explanation