강의

멘토링

커뮤니티

인프런 커뮤니티 질문&답변

치콩님의 프로필 이미지
치콩

작성한 질문수

초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트

2-1 [코드설명] 기초다지기! 이동할 거리 백분율 구하는 방법

offsetheight와 scrollheight

작성

·

386

0

예시코드:

function getPercent(){

let scrollHeight = document.querySelector('.sec01').scrollHeight;

}

 

질문내용: getPercent 함수 맨첫번째줄에서 offsetheight을구하는게 아닌 scrollheight을 구해도 정삭작동했는데 이렇게 했을 시 다른점이있을까요?

답변 1

1

깡코딩님의 프로필 이미지
깡코딩
지식공유자

안녕하세요 :)

1.scrollHeight는 오버플로우로 인해 화면에 표시되지 않는 콘텐츠를 포함한 엘리먼트의 전체 높이를 측정한 것이구요

2.offsetHeight는 오버플로우와 무관하게 엘리먼트의 높이를 측정한 것입니다

아래 그림을 보면 두 개의 박스 높이는 300px인데요

image

※ 왼쪽 박스는 화면에 표시되지 않는 콘텐츠를 포함한 엘리먼트의 전체 높이를 가져왔기 때문에 476px이 나오고

※ 오른쪽 박스는 오버를로우와 무관하게 엘리먼트의 높이를 측정했기 때문에 원래 높이 300px이 나오는 걸 알 수 있습니다

※ 즉 두 개의 속성(scrollHeight, offsetHeight)은 상황에 따라 다른 값을 가져오기 때문에 높이를 측정할 때 유의해 사용하면 될 것 같네요

그럼 또 다른 궁금증이 생기면 문의주세요 :)

 

치콩님의 프로필 이미지
치콩

작성한 질문수

질문하기