我正在尝试通过路口观察器调用回调。
我希望 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>
这是一个代码笔演示: codepen demo
您可以单击页面中的任意位置开始移动 ccc block 。
最佳答案
具有position: fixed 的元素相对于视口(viewport)定位并且视口(viewport)移动。因此，固定定位元素会在您滚动时“移动”。尽管 #target 是 #middle 的子级，但我相信 IntersectionObserver，无论它在幕后使用什么来计算 target 是否是进入/离开 root，永远不会触发回调，因为 target 在文档流之外。
这是一个相关的问题。互联网上与此问题相关的内容不多:https://bugs.chromium.org/p/chromium/issues/detail?id=653240
注意:在目标上设置 position: absolute 确实会在进入和离开视口(viewport)时触发回调。
关于javascript - 交叉口观察器不适用于位置为 : fixed 的目标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49389232/