Intersection observer does not work with target with position: fixed
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.
javascript intersection-observer
asked Mar 20 '18 at 16:16
krave
350314
add a comment |
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.
javascript intersection-observer
asked Mar 20 '18 at 16:16
krave
350314
add a comment |
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.
javascript intersection-observer
asked Mar 20 '18 at 16:16
krave
350314
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.
javascript intersection-observer
javascript intersection-observer
asked Mar 20 '18 at 16:16
krave
350314
asked Mar 20 '18 at 16:16
krave
350314
asked Mar 20 '18 at 16:16
krave
350314
asked Mar 20 '18 at 16:16
krave
350314
asked Mar 20 '18 at 16:16
krave
350314
350314
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Elements with position: fixed are positioned relative to the viewport and the viewport moves. 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.
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: absolute on the target does indeed fire the callback when entering and leaving the viewport.
answered Nov 21 '18 at 0:13
snewcomer
130110
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f49389232%2fintersection-observer-does-not-work-with-target-with-position-fixed%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Elements with position: fixed are positioned relative to the viewport and the viewport moves. 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.
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: absolute on the target does indeed fire the callback when entering and leaving the viewport.
answered Nov 21 '18 at 0:13
snewcomer
130110
add a comment |
Elements with position: fixed are positioned relative to the viewport and the viewport moves. 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.
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: absolute on the target does indeed fire the callback when entering and leaving the viewport.
answered Nov 21 '18 at 0:13
snewcomer
130110
add a comment |
Elements with position: fixed are positioned relative to the viewport and the viewport moves. 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.
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: absolute on the target does indeed fire the callback when entering and leaving the viewport.
answered Nov 21 '18 at 0:13
snewcomer
130110
Elements with position: fixed are positioned relative to the viewport and the viewport moves. 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.
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: absolute on the target does indeed fire the callback when entering and leaving the viewport.
answered Nov 21 '18 at 0:13
snewcomer
130110
answered Nov 21 '18 at 0:13
snewcomer
130110
answered Nov 21 '18 at 0:13
snewcomer
130110
answered Nov 21 '18 at 0:13
snewcomer
130110
130110
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f49389232%2fintersection-observer-does-not-work-with-target-with-position-fixed%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
