交叉口观察器不适用于 position 的目标：已修复

Question

I am trying to invoke a callback via intersection observer.我正在尝试通过路口观察器调用回调。

I want the target to be style: "position: fixed" and move it via style.top .我希望target是style: "position: fixed"并通过style.top移动它。

I also specified the root element which is an ancestor of the target with style: "position: relative" .我还指定了根元素，它是具有style: "position: relative" 。

But when the target and the observer intersects, the callback function won't be triggered.但是当目标和观察者相交时，不会触发回调function。

Are there some limitations I missed?我错过了一些限制吗？

Here is what I typed:这是我输入的内容：

<!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>

And here is a codepen demo: codepen demo这是一个 codepen 演示： codepen demo

You can click anywhere in the page to start moving the ccc block.您可以单击页面中的任意位置以开始移动ccc块。

Answer 1

Elements with position: fixed are positioned relative to the viewport and the viewport moves. position: fixed元素相对于视口放置，并且视口移动。 So, fixed positioned elements "move" as you scroll. 因此，固定位置的元素在滚动时会“移动”。 Even though #target is a child of #middle , I believe the IntersectionObserver, with whatever it uses under the hood to calculate if the target is entering/leaving the root , never fires the callback because the target is outside of the document flow. 尽管#target是#target的子#middle ，但我相信IntersectionObserver及其在#middle使用的用于计算target是否进入/离开root ，都永远不会触发回调，因为target位于文档流之外。

Here is a related issue. 这是一个相关的问题。 There isn't much out in the interwebs related to this issue: https://bugs.chromium.org/p/chromium/issues/detail?id=653240 与该问题有关的互联网站点中没有太多内容： https ://bugs.chromium.org/p/chromium/issues/detail?id=653240

Note: Setting position: absolute on the target does indeed fire the callback when entering and leaving the viewport. 注意：设置position: absolute目标的position: absolute确实会在进入和离开视口时触发回调。

Answer 2

In my case I had my root element (with position:fixed) at the same DOM hierarchy level as the elements I wanted to observe (that were scrollable) and no events were triggered.在我的例子中，我的根元素（带有 position:fixed）与我想要观察的元素（可滚动）处于相同的 DOM 层次结构级别，并且没有触发任何事件。

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

When I placed the elements inside the root the events triggered.当我将元素放在根内时，事件触发。

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

交叉口观察器不适用于 position 的目标：已修复

问题描述

2 个解决方案

解决方案1
1 2018-11-21 00:13:58

解决方案2
0 2022-03-04 13:05:59

交叉口观察器不适用于 position 的目标：已修复

问题描述

2 个解决方案

解决方案1 1 2018-11-21 00:13:58

解决方案2 0 2022-03-04 13:05:59

解决方案1
1 2018-11-21 00:13:58

解决方案2
0 2022-03-04 13:05:59