交叉口观察者不能使用位置:固定的目标

Question

交叉口观察者不能使用位置:固定的目标

kra*_*ave 8 javascript intersection-observer

我试图通过交集观察者调用回调.

我想要的target是style: "position: fixed",并通过移动它 style.top.

我还指定了根元素,它是目标的祖先style: "position: relative".

但是当目标和观察者相交时,不会触发回调函数.

我错过了一些限制吗？

这是我输入的内容:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IO</title>
</head>
<body>
<div style="height: 200px;width: 100%;background: violet" class="upper">aaa</div>
<div style="position:relative;height: 200px;width: 100%;background: blueviolet" id="middle">bbb
    <div id="target" style="position:fixed;top: 0px;width: 50px;height: 50px;background: firebrick">ccc</div>
</div>
<script>
    let options = {
        root: document.getElementById("middle"),
        rootMargin: '0px',
        threshold: 0
    };
    let observer = new IntersectionObserver(entry => {
        console.log("observer's acting.")
    }, options);

    let target = document.getElementById("target");
    observer.observe(target);

    let stepping = 0;

    let cb = () => {
        target.style.top = stepping + 'px';
        stepping += 4;
        if (stepping < 300){
            setTimeout(cb, 100);
        }
    };

    window.addEventListener("click", () => {
        cb();
    })
</script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

这是一个codepen演示: codepen演示

您可以单击页面中的任意位置以开始移动ccc块.

Answer 1

sne*_*mer 5

元素position: fixed相对于视口定位，视口移动。因此，固定定位的元素会在您滚动时“移动”。即使#target是的孩子#middle，我相信 IntersectionObserver，无论它在引擎盖下使用什么来计算是否target进入/离开root，都不会触发回调，因为target位于文档流之外。

这是一个相关的问题。与此问题相关的互联网上没有太多内容：https ://bugs.chromium.org/p/chromium/issues/detail?id=653240

注意：position: absolute在目标上设置确实会在进入和离开视口时触发回调。

在我自己的测试中，如果根是视口，“position:absolute”似乎会像您希望的那样工作，但如果您检查与另一个元素的交集，它会出现与“fixed”相同的问题。我在某处看到一些关于此的语言，指出两个观察到的元素必须位于同一个“区块链”中；据推测，这意味着两者都不允许使用“fixed”或“absolute”突破渲染流程。这很遗憾，因为绝对元素和相对元素之间的冲突是经常需要检测的事情。我想对于这些情况来说又回到了旧的方式。 (6认同)
为了完整起见，我想确认 `position:absolute` 正在与 Intersection Observer 一起使用，我只是有错误的实现。对于阅读本文的任何人来说，这肯定不是问题。 (2认同)

归档时间：	8 年，6 月前
查看次数：	1446 次
最近记录：	7 年，10 月前