交叉口觀察器不適用於 position 的目標：已修復

Question

我正在嘗試通過路口觀察器調用回調。

我希望target是style: "position: fixed"並通過style.top移動它。

我還指定了根元素，它是具有style: "position: relative" 。

但是當目標和觀察者相交時，不會觸發回調function。

我錯過了一些限制嗎？

這是我輸入的內容：

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

這是一個 codepen 演示： codepen demo

您可以單擊頁面中的任意位置以開始移動ccc塊。

Answer 1

position: fixed元素相對於視口放置，並且視口移動。 因此，固定位置的元素在滾動時會“移動”。 盡管#target是#target的子#middle ，但我相信IntersectionObserver及其在#middle使用的用於計算target是否進入/離開root ，都永遠不會觸發回調，因為target位於文檔流之外。

這是一個相關的問題。 與該問題有關的互聯網站點中沒有太多內容： https ://bugs.chromium.org/p/chromium/issues/detail?id=653240

注意：設置position: absolute目標的position: absolute確實會在進入和離開視口時觸發回調。

Answer 2

在我的例子中，我的根元素（帶有 position:fixed）與我想要觀察的元素（可滾動）處於相同的 DOM 層次結構級別，並且沒有觸發任何事件。

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

當我將元素放在根內時，事件觸發。

<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