IntersectionObserver rootMargin 的正負值不起作用

Question

設置rootMargin的代碼如下所示。

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

當我將其設置為100px ，根元素的邊界框不會增長 100px； 當我將其設置為-100px ，根元素的邊界框不會縮小 100px。

這是一個關於 jsFiddle的例子。 該示例直接取自MDN 的 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。