[英]IntersectionObserver rootMargin's positive and negative values are not working
The code for setting the rootMargin
is shown below.设置rootMargin
的代码如下所示。
let observerOptions = {
root: null,
rootMargin: "100px",
threshold: []
};
When I set it to 100px
, the root element's bounding box isn't growing 100px;当我将其设置为100px
,根元素的边界框不会增长 100px; when I set it to -100px
, the root element's bounding box isn't shrinking 100px.当我将其设置为-100px
,根元素的边界框不会缩小 100px。
Here is an example on jsFiddle .这是一个关于 jsFiddle的例子。 The example is taken directly from MDN's documentation of IntersectionObserver , and I only changed the value of rootMargin
.该示例直接取自MDN 的 IntersectionObserver 文档,我只更改了rootMargin
的值。
In your example on jsFiddle, your IntersectionObserver
is in a iframe
(jsFiddle wrap all the code in a iframe).在 jsFiddle 上的示例中,您的IntersectionObserver
位于iframe
(jsFiddle 将所有代码包装在 iframe 中)。 For works in a iframe
you must set the root with the iframe element.对于iframe
作品,您必须使用 iframe 元素设置根。
In general, rootMargin
works well if you set the root
element with the correct element (the element with the scrollbar).通常,如果您使用正确的元素(带有滚动条的元素)设置root
元素,则rootMargin
效果很好。 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.在经典的 html 文件中尝试您的代码,它可能适用于root: null
,但它永远不会适用于 jsFiddle。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.