- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
设置rootMargin
的代码如下所示。
let observerOptions = {
root: null,
rootMargin: "100px",
threshold: []
};
当我将它设置为 100px
时,根元素的边界框不会增长 100px;当我将它设置为 -100px
时,根元素的边界框不会缩小 100px。
这是一个 example on jsFiddle .例子直接取自MDN's documentation of IntersectionObserver ,我只更改了 rootMargin
的值。
最佳答案
在您关于 jsFiddle 的示例中,您的 IntersectionObserver
位于 iframe
中(jsFiddle 将所有代码包装在 iframe 中)。对于 iframe
中的作品,您必须使用 iframe 元素设置根。
一般来说,如果您使用正确的元素(带有滚动条的元素)设置 root
元素,rootMargin
会很好地工作。例如:
let observerOptions = {
root: document.getElementById("parentScroll"),
rootMargin: "100px",
threshold: []
};
在经典的 html 文件中尝试您的代码,它可能适用于 root: null
,但它永远不会适用于 jsFiddle。
关于javascript - IntersectionObserver rootMargin 的正负值不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54983348/
当目标元素距离交叉点根 100px 时,我想拦截一个交叉点 为了做到这一点,我将 rootMargin 设置为“100px 0px 100px 0px”。 在这个例子中,当目标元素的第一个像素(红色框
设置rootMargin的代码如下所示。 let observerOptions = { root: null, rootMargin: "100px", threshold:
我是一名优秀的程序员,十分优秀!