window.scrollY CODE_BLOCK: window.scrollY CODE_BLOCK: window.scrollY CODE_BLOCK: element.getBoundingClientRect().top + window.scrollY CODE_BLOCK: element.getBoundingClientRect().top + window.scrollY CODE_BLOCK: element.getBoundingClientRect().top + window.scrollY CODE_BLOCK: window.scrollY === 0 // always true CODE_BLOCK: window.scrollY === 0 // always true CODE_BLOCK: window.scrollY === 0 // always true CODE_BLOCK: const el = document.querySelector("div.whitespace-pre-wrap"); CODE_BLOCK: const el = document.querySelector("div.whitespace-pre-wrap"); CODE_BLOCK: const el = document.querySelector("div.whitespace-pre-wrap"); CODE_BLOCK: function findScrollParent(element) { let parent = element.parentElement; while (parent) { const style = getComputedStyle(parent); if (/(auto|scroll)/.test(style.overflowY)) { return parent; } parent = parent.parentElement; } return document.documentElement; } const container = findScrollParent(el); CODE_BLOCK: function findScrollParent(element) { let parent = element.parentElement; while (parent) { const style = getComputedStyle(parent); if (/(auto|scroll)/.test(style.overflowY)) { return parent; } parent = parent.parentElement; } return document.documentElement; } const container = findScrollParent(el); CODE_BLOCK: function findScrollParent(element) { let parent = element.parentElement; while (parent) { const style = getComputedStyle(parent); if (/(auto|scroll)/.test(style.overflowY)) { return parent; } parent = parent.parentElement; } return document.documentElement; } const container = findScrollParent(el); CODE_BLOCK: const y = el.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop; console.log(y); CODE_BLOCK: const y = el.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop; console.log(y); CODE_BLOCK: const y = el.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop; console.log(y); CODE_BLOCK: container.scrollTo({ top: y, behavior: "smooth" }); CODE_BLOCK: container.scrollTo({ top: y, behavior: "smooth" }); CODE_BLOCK: container.scrollTo({ top: y, behavior: "smooth" }); CODE_BLOCK: const marker = document.createElement("div"); marker.style.position = "absolute"; marker.style.left = "0"; marker.style.right = "0"; marker.style.background = "red"; marker.style.height = "2px"; marker.style.top = y + "px"; document.body.appendChild(marker); CODE_BLOCK: const marker = document.createElement("div"); marker.style.position = "absolute"; marker.style.left = "0"; marker.style.right = "0"; marker.style.background = "red"; marker.style.height = "2px"; marker.style.top = y + "px"; document.body.appendChild(marker); CODE_BLOCK: const marker = document.createElement("div"); marker.style.position = "absolute"; marker.style.left = "0"; marker.style.right = "0"; marker.style.background = "red"; marker.style.height = "2px"; marker.style.top = y + "px"; document.body.appendChild(marker); CODE_BLOCK: container.scrollTop = y; const diff = el.getBoundingClientRect().top() - container.getBoudningClientRect().top; console.log(diff); CODE_BLOCK: container.scrollTop = y; const diff = el.getBoundingClientRect().top() - container.getBoudningClientRect().top; console.log(diff); CODE_BLOCK: container.scrollTop = y; const diff = el.getBoundingClientRect().top() - container.getBoudningClientRect().top; console.log(diff); CODE_BLOCK: window.scrollY // page doesn't scroll document.body.scrollTop element.offsetTop // breaks with nested layouts CODE_BLOCK: window.scrollY // page doesn't scroll document.body.scrollTop element.offsetTop // breaks with nested layouts CODE_BLOCK: window.scrollY // page doesn't scroll document.body.scrollTop element.offsetTop // breaks with nested layouts CODE_BLOCK: const el = document.querySelector("div.whitespace-pre-wrap"); const container = findScrollParent(el); const y = el.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop; CODE_BLOCK: const el = document.querySelector("div.whitespace-pre-wrap"); const container = findScrollParent(el); const y = el.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop; CODE_BLOCK: const el = document.querySelector("div.whitespace-pre-wrap"); const container = findScrollParent(el); const y = el.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop;
- The page itself does not scroll
- Scrolling happens inside a nested container
- The <body> is fixed-height - window.scrollY only works when the document scrolls
- ChatGPT uses an internal scroll container
- Always compute positions relative to the scroll container
- Use getBoundingClientRect + scrollTop for reliable results
- Browser extensions
- UI automation (Playwright / Selenium)
- Auto-scrolling chat UIs
- Virtualized lists
- Any SPA where windows.scrollY is useless
