javascript - IntersectionObserver rootMargin 的正负值不起作用

Question

设置的代码rootMargin如下所示。

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

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

这是jsFiddle 上的一个示例。示例直接取自MDN 的 IntersectionObserver 文档，我只更改了rootMargin.

Answer 1

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

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

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

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