How to Get the Correct Y Position of an Element in CHATGPT UI

ChatGPT 같은 SPA에서 window.scrollY가 항상 0을 반환하는 문제를 scroll container 기준으로 Y 좌표를 재계산해 해결

Lộc Trương2026년 3월 24일7분intermediate

AI 요약

Context

ChatGPT 웹 UI를 포함한 많은 현대 웹 애플리케이션에서는 페이지 전체가 아닌 중첩된 컨테이너 내부에서만 스크롤이 발생한다. 따라서 window.scrollY는 항상 0을 반환하며, element.getBoundingClientRect().top + window.scrollY 패턴도 실패한다.

Technical Solution

DOM을 순회하며 실제 스크롤이 발생하는 부모 요소 찾기: overflow-y: auto 또는 overflow-y: scroll 속성을 가진 요소를 findScrollParent() 함수로 식별
스크롤 컨테이너 기준 Y 좌표 계산: element.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop 공식 적용
계산된 Y 값 검증: container.scrollTo({top: y, behavior: "smooth"})로 요소가 정확히 정렬되는지 확인
작동하지 않는 패턴 회피: window.scrollY, document.body.scrollTop, element.offsetTop 대신 scroll container 기준 계산 사용

Key Takeaway

단일 문서 스크롤 가정이 깨진 SPA 환경에서는 요소의 절대 위치 대신 해당 요소를 포함하는 스크롤 컨테이너를 명시적으로 식별한 후 그 기준점으로 좌표를 재계산하는 것이 필수다.

실천 포인트

브라우저 확장 프로그램, Playwright/Selenium 자동화, 채팅 UI 자동 스크롤, 가상화 리스트 등 SPA 환경에서 요소 위치에 접근해야 할 때, `findScrollParent()` 헬퍼로 scroll container를 먼저 찾은 후 `getBoundingClientRect() + scrollTop` 조합으로 계산하면 window.scrollY 기반 접근의 오류를 방지할 수 있다.

태그

#BrowserAutomation #ScrollBehavior #DOM #ChatGPT #SPA

원문 읽기