[JS] DOM element의 offsetTop

안녕하세요, Einere입니다.

(ADblock을 꺼주시면 감사하겠습니다.)

---

오늘은 DOM element의 offsetTop속성에 대해 알아보도록 하겠습니다.

 

 

 

offsetTop

offsetTop은 뭘까요?

MDN에서는 다음과 같이 설명하고 있습니다.

offsetTop is the number of pixels from the top of the closest relatively positioned parent element.

음.. 가장 가까운 상대적으로 가장 가까운 부모 엘레먼트의 상단에서부터의 픽셀값이라고 합니다.

중요한 부분은 가장 가까운 부모에 대해, 상대적 픽셀값이라는 것입니다.

 

상대적으로 가까운 부모라는 말이 조금 이상하긴 하지만, 제가 이해한 바로는 조상이 아닌 '부모'를 의미하는 듯 합니다.

DOM element들은 복잡한 트리형태로 구성되니까 말이죠.

 

 

 

주의점

구글에 엘레먼트의 절대위치를 얻고자 할때 offsetTop을 사용하라는 경우가 많은데, 사실 그대로 사용하면 제대로 작동하지 않는 경우가 있습니다.

 

about 엘레먼트의 offsetTop과 그 부모의 offsetTop

'title-about'이라는 id값을 가진 엘레먼트(파란색으로 음영이 칠해진 부분)를 얻은 후, offsetTop을 보면 100이 나옵니다. 

가시성을 위해 스크린샷을 일부 잘라서 안보이지만, 해당 엘레먼트의 절대위치는 100px을 훌쩍 넘습니다.

about엘레먼트의 부모의 offsetTop은 1252인 것을 보면 알 수 있죠.

 

window.scrollTo(0, about.offsetTop);

만약 about엘레먼트의 위치로 스크롤을 이동시키기 위해 위와 같은 코드를 사용한다면, 웹페이지 최상단에서부터 100px떨어진 곳으로 스크롤이 이동하게 됩니다.

 

그럼 왜 100이라는 값이 나왔을까요?

about 엘레먼트의 부모 엘레먼트의 padding 영역

about엘레먼트의 부모 엘레먼트의 padding영역입니다.

상단에 100px의 패딩이 적용되어 있습니다.

about엘레먼트의 offsetTop의 값은 가장 가까운 부모의 상단으로 부터 about엘레먼트의 상단까지의 픽셀값이었던 것입니다!!

 

그럼 어떻게 해야 좋을까요?

function getPosY(element){
    let posY = element.offsetTop;
    if(element.offsetParent){
        posY += element.offsetParent.offsetTop;
    }
    return posY;
}

위와 같이 부모의 offsetTop을 더하면 됩니다.

저같은 경우, about엘레먼트의 부모의 부모는 body엘레먼트이므로, 의도한 대로 잘 작동합니다.

 

 

 

참고

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop

https://www.codingforums.com/javascript-programming/126325-offsettop-offsetleft-returns-wrong-values.html