相交观察器不适用于位置为固定的目标

我正在尝试通过交集观察器调用回调。

我希望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>

这是一个代码笔演示：代码笔演示

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

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

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

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

就我而言，我的根元素(位置：固定(与我想要观察的元素(可滚动(位于相同的 DOM 层次结构级别，并且没有触发任何事件。

<div id="root" style="position:fixed"></div>
<div id="scrollable"></div>

当我将元素放在根中时，事件触发了。

<div id="root" style="position:fixed">
  <div id="scrollable"></div>
</div>

相关内容

最新更新

热门标签：