Recently, several details need to be paid attention to in the use of IntersectionObserver, which are recorded and sorted here for your reference.

Nothing described in this article includes version V2

Quite a number of articles have already introduced the principle, application method and application scenario of IntersectionObserver, so this article will not repeat the introduction.

About the polyfill

We all know that IntersectionObserver has poor compatibility on iOS at present, and only versions after 12.1 are native supported, which obviously does not meet the compatibility requirements (the company requires compatibility with iOS9). Android is still OK, and all functions above 5.0 are native supported. Therefore, polyfill should be introduced if you want to use it on mobile devices. The w3c’s official Polyfill is recommended here. The link is github.com/w3c/Interse…

The value of rootMargin must specify a unit

RootMargin is used to expand or reduce the size of the rootBounds area. Note that the value of rootMargin must be set with a unit, otherwise the Observer will be invalid.

const observer = new IntersectionObserver(callback, {
  rootMargin: '100px 0'
})
Copy the code

This code will cause the page to report an error because the rootMargin value must be specified in units, even 0, which can be either px or a percentage sign.

This is different from the MARGIN property of CSS, because if it is a margin property, it is OK to write it as above.

RootMargin negative

A negative rootMargin can reduce the rootBounds range and affect crossover firing, such as when we have a page like this:

The layout is very simple:

.top-placeholder {
    height: 300px;
    background-color: aquamarine;
}
.content {
    height: 200px;
    background-color: blueviolet;
}
.bottom-placeholder {
    height: 1500px;
    background-color: cadetblue;
}
Copy the code

We want to trigger something when the Content area enters or leaves the 100px area below the top of the viewport, using a negative rootMargin combined with the threshold

const callback = (entries) = > {
    const { rootBounds, intersectionRatio } = entries[0];
    console.log(rootBounds, intersectionRatio);
};
const observer = new IntersectionObserver(callback , {
    threshold: [1].rootMargin: '-100px 0px 0px 0px'
});

observer.observe(document.querySelector('.content'));
Copy the code

RootMargin comes at a time

Based on the above example, we add a Bottom Content area below the Bottom Placeholder, again a simple layout:

.bottom-content {
    height: 300px;
    background-color:chocolate;
}
Copy the code

When you first enter the page, the Bottom Content area is outside the viewport and some distance from it

At this point we want to do something when the Bottom Content area enters 100px below the Bottom of the viewport (the red box in the image below)

At this point, all you need to do is rewrite IntersectionObserver Options in the above example:

const observer = new IntersectionObserver(callback , {
    rootMargin: '0px 0px 100px 0px'
});
Copy the code