Intersection Observer 不能只增加顶部的 rootMargin

Question

我试图仅将 rootMargin 的最高值增加 50 像素。我用于该选项的代码是 rootMargin: '50px 0px 0px 0px'。那是行不通的。

虽然使用rootMargin: '50px 0px'可以满足我的情况，但我不想增加底值。

完整的测试代码如下。我没有在 jsFiddle 上创建演示，因为 jsFiddle 将结果包装在一个 iframe 中，这将是 root。我无法将该 iframe 设置为 jsFiddle 上的根目录，因此演示无法运行。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>rootMargin test</title>
<style>
* {
    margin: 0;
    padding: 0;
}
#full-height {
    margin-bottom: 100px;
    height: 100vh;
    background-color: lightgreen;
}
#observee {
    background-color: lightblue;
}
</style>
</head>
<body>

<div id="full-height"></div>
<p id="observee">I'm being observed.</p>

<script>
var observer = new IntersectionObserver(
    function(entries) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                console.log('Intersected.');
            }
        });
    },
    {
        rootMargin: '50px 0px 0px 0px'
    }
);
observer.observe(document.querySelector('#observee'));
</script>

</body>
</html>

Answer 1

虽然这是一个较旧的问题，但我认为以下内容可能会对遇到类似问题的用户有所帮助。

您可以运行 JSFiddle 中的演示 - 只需更改要用作触发器的根。请参阅下面的演示以突出显示这一点。
我认为您可能混淆了 rootMargin 属性。从你的问题来看，听起来你希望观察到的元素在它进入视图之前触发 50px 。如果是这种情况，那么你想增加根 bottom 边距： 0px 0px 50px 0px 如果你想仅在元素到达根内部 50px 时触发元素，则使用： 0px 0px -50px 0px。您可以省略最后一个值，例如：0px 0px 50px，即 top left/right bottom

查看下面的演示：

JSFiddle

Intersection Observer 不能只增加顶部的 rootMargin

Intersection Observer cannot increase only the top rootMargin

javascript

intersection-observer