Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IntersectionObserver rootMargin's positive and negative values are not working

The code for setting the rootMargin is shown below.

let observerOptions = {
    root: null,
    rootMargin: "100px",
    threshold: []
};

When I set it to 100px, the root element's bounding box isn't growing 100px; when I set it to -100px, the root element's bounding box isn't shrinking 100px.

Here is an example on jsFiddle. The example is taken directly from MDN's documentation of IntersectionObserver, and I only changed the value of rootMargin.

like image 801
Ian Y. Avatar asked Mar 04 '19 12:03

Ian Y.


1 Answers

In your example on jsFiddle, your IntersectionObserver is in a iframe (jsFiddle wrap all the code in a iframe). For works in a iframe you must set the root with the iframe element.

In general, rootMargin works well if you set the root element with the correct element (the element with the scrollbar). Eg.:

let observerOptions = {
    root: document.getElementById("parentScroll"),
    rootMargin: "100px",
    threshold: []
};

Try your code in a classic html file and probably it works with root: null, but it will never works on jsFiddle.

like image 183
ar099968 Avatar answered Sep 26 '22 00:09

ar099968