Here's some code showing document.documentElement.scrollTop
as you scroll
const contentElem = document.querySelector('#content')
for (let i = 0; i < 500; ++i) {
const elem = document.createElement('h1');
elem.textContent = `line: ${i}`;
contentElem.appendChild(elem);
}
const debugElem = document.querySelector('#debug');
function update() {
debugElem.textContent = `scrollY: ${window.scrollY}
documentElement.scrollTop: ${document.documentElement.scrollTop}
documentElement.nodeName: ${document.documentElement.nodeName}`;
requestAnimationFrame(update);
}
requestAnimationFrame(update);
#under {
position: absolute;
transform: translateY(500px);
left: 0;
top: 0;
background-color: pink;
width: 100%;
height: 100%;
z-index: -1;
}
#debug {
position: fixed;
color: white;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.8);
}
<div id="under"></div>
<div id="content"></div>
<pre id="debug"></pre>
And here is the exact same code running in an iframe.
const script = 'script';
const html = `
<style>
#under {
position: absolute;
transform: translateY(500px);
left: 0;
top: 0;
background-color: pink;
width: 100%;
height: 100%;
z-index: -1;
}
#debug {
position: fixed;
color: white;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.8);
}
</style>
<div id="under"></div>
<div id="content"></div>
<pre id="debug"></pre>
<${script}>
const contentElem = document.querySelector('#content')
for (let i = 0; i < 500; ++i) {
const elem = document.createElement('h1');
elem.textContent = \`line: \${i}\`;
contentElem.appendChild(elem);
}
const debugElem = document.querySelector('#debug');
function update() {
debugElem.textContent = \`scrollY: \${window.scrollY}
documentElement.scrollTop: \${document.documentElement.scrollTop}
documentElement.nodeName: \${document.documentElement.nodeName}\`;
requestAnimationFrame(update);
}
requestAnimationFrame(update);
</${script}>
`;
const iframeElem = document.querySelector('iframe');
iframeElem.src = URL.createObjectURL(new Blob([html], {type: 'text/html'}));
<iframe></iframe>
Inside the iframe, the value document.documentElement.scrollTop
never changes. Why? Note: Tested on Chrome, Firefox, and Safari