IntersectionObserver rootMargin的正负值不起作用

Question

设置rootMargin的代码如下所示。

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

当我将其设置为100px时，根元素的边界框不会增长100px；当我将其设置为-100px时，根元素的边界框不会缩小100px。

这里是example on jsFiddle。该示例直接取自MDN's documentation of IntersectionObserver，而我仅更改了rootMargin的值。

Answer 1

在jsFiddle的示例中，您的IntersectionObserver在iframe中（jsFiddle将所有代码包装在iframe中）。对于iframe中的作品，必须使用iframe元素设置根。

通常，如果将rootMargin元素设置为正确的元素（带有滚动条的元素），则root会很好地工作。例如：

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

在经典的html文件中尝试您的代码，可能它可以与root: null一起使用，但永远不会在jsFiddle上使用。