inflearn logo
강의

Course

Instructor

Scroll interaction that even beginners can create. Part 1 JavaScript

2-1 [Code Explanation] Building the Basics! How to Calculate the Percentage of Distance to Move

offsetheight와 scrollheight

396

mingmi274111

4 asked

0

예시코드:

function getPercent(){

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

}

 

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

HTML/CSS jquery 인터랙티브-웹 javascript

Answer 1

1

ggangcoding162118

안녕하세요 :)

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

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

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

image

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

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

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

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

 

다음강의 언제나오나요 다음강의는 인터렉티브한 전체적인 웹사이트였으면 좋겠네요

0

196

1

반응형에 대해 질문이 있습니다 !

0

365

1

날짜 카운트를 활용하여 시간으로 적용해볼 수 있나요?

0

379

1

함수가 정의되기 전에 함수 호출

0

342

1

섹션12 보너스 챕터에 관한 질문입니다!

0

468

1

5-3-1 강좌 섹션 질문 합니다.

0

310

1

죄송합니다만 해당 프로젝트를 리엑트로 수정해서 만들어보고있는중에 질문드립니다.

1

462

3

화면 높이 관련 질문 있습니다.

1

433

1

선생님

0

369

1

5-2 vanilla.html 질문합니다.

0

420

1

5-3-2 질문입니다.

1

291

1

5-2 추가 질문이요

0

345

2

5-2 ! 질문이요.

0

266

1

안녕하세요!

0

272

1

질문드립니다.

1

365

2

질문드립니다.

0

1664

3

색션6강 카운트관련 문의드립니다!

0

237

1

섹션5 관련 질문드립니다.

0

261

1

setProperty 를 재활용 하고싶습니다.

0

210

1

IntersectionObserver

0

255

1

완성된코드를 그대로 가져왔는데 크기가 이상해요

0

426

2

2:56에 10씩 증가시키는건 어떻게 하신건가요?

0

313

1

<script>에 $(function(){})으로 감싸준 이유

0

204

1

5섹션예제 전부 깨져요 ㅠ

0

240

1