scroll 값 계산하기

언제 scroll값 계산이 필요할까?

보통은 동적으로 데이터가 바뀌는 경우이다.
데이터 목록에서 다른 페이지를 선택하는 경우 혹은 화면에 표시되는 데이터 목록의 갯수를 변경하는 경우
데이터가 수정되고 데이터 목록의 상단으로 이동하기 위해 scroll값 계산이 필요하다.

버튼을 클릭하면 해당 컨텐츠의 상당으로 이동하도록 함수를 만들어보자.

offsetTop을 이용해서 상대적인 scroll 값을 계산해보자.

offsetTop은 요소의 부모 요소로부터의 상대적인 위치를 나타내는 속성이다. 이 속성은 요소의 위쪽 가장자리가 부모 요소의 위쪽 가장자리에서 얼마나 떨어져 있는지를 픽셀 단위로 반환한다.

test content요소의 부모 요소는 main title, upper content, test content 모두를 감싸고 있는 div이다. 그렇기 때문에 test contend의 offsetTop을 계산하면 최상단과 자신의 머리와의 거리를 알 수 있다.

offsetTop만 계산하면 요소의 위쪽 가장자리로 scroll이 되기 때문에 background-color 가 있다면 다소 답답해보일 수 있다. 그럴땐 해당 요소의 marginTop도 같이 계산해 scroll되면 좋다.

테스트를 위해 작성된 코드는 여기서 확인이 가능하다.

test content 안에 위치한 button을 클릭한 후 scroll이 조작된다.
아래 코드는 button의 onclick에 바인딩된 되는 함수이다.

function moveScroll(event) {
  const calculatedHeight =
    event.target.parentElement.offsetTop -
    parseInt(getComputedStyle(event.target.parentElement).marginTop);
  window.scrollTo(0, calculatedHeight);
}

event가 발생되면 event.target은 button이고,
button의 부모요소는 button을 감싸고 있는 test content이다.

부모요소의 offsetTop과 marginTop을 계산하고,
window 객체의 scrollTo(x, y) 메서드로 scroll을 옮겨준다.