IntersectionObserver rootMargin 的正负值不起作用

Question

设置rootMargin的代码如下所示。

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

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

这里是一个example on jsFiddle. The example is taken directly from MDN's documentation of IntersectionObserver，我只改了rootMargin的值。

Answer 1

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

一般来说，如果您使用正确的元素（带有滚动条的元素）设置 root 元素，rootMargin 效果很好。例如：

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

在经典 html 文件中尝试您的代码，它可能适用于 root: null，但它永远不会适用于 jsFiddle。

IntersectionObserver rootMargin's positive and negative values are not working