{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 别忘想泡老子 的问题《Intersection observer does not work with target wi》','https://www.manongdao.com/q-766933.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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.
I also specified the root element which is an ancestor of the target with style: "position: relative".
But when the target and the observer intersects, the callback function won't be triggered.
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
You can click anywhere in the page to start moving the ccc block.
Elements with
position: fixedare positioned relative to the viewport and the viewport moves. So, fixed positioned elements "move" as you scroll. Even though#targetis a child of#middle, I believe the IntersectionObserver, with whatever it uses under the hood to calculate if thetargetis entering/leaving theroot, never fires the callback because thetargetis outside of the document flow.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
Note: Setting
position: absoluteon the target does indeed fire the callback when entering and leaving the viewport.