TIL 009 JavaScript_Scrolling

aliceinkorea·2021년 3월 8일
2

TIL

목록 보기
9/23
post-thumbnail

🎯 스크롤에 대해 이해하기


1. scrollWidth & scrillHeight

scrollWidth와 scrooHeight 속성은 clientWidth, clientHeight와 유사하지만, 스크롤바에 의해 감춰져 있는 숨겨진 영역도 포함한다는 점이 다르다.

  • 수평 스크롤바가 없기 때문에 scrollWidth = clientWidth
  • 수직 스크롤바가 있으므로 scrollHeight는 가려진 부분을 포함하는 컨첸츠 영역 전체 높이

❓ scrollWidth/scrollHeight을 어떻게 활용할 수 있을까.

요소 크기를 콘텐츠가 차지하는 만큼 늘리고자 할 때 사용할 수 있다.

elem.style.height = ${elem.scrollHeight}`px`

2. scrollLeft & scrollTop

scrollLeft와 scrollTop 속성은 수평 스크롤이 오른쪽, 수직 스크롤이 아래로 움직임에 따라 가려진 영역의 너비와 높이를 나타낸다.

  • scrollTop은 수직 스크롤 바에 의해 가려져 보이지 않는 위쪽 콘텐츠의 높이다.
  • scrollLeft는 수평 스크롤 바에 의해 가려져 봉이지 않는 왼쪽 콘텐츠의 너비다.
  • scrollLeft와 scrollTop은 값을 변경할 수 있다는 점이 특이하다.
elem.scrollTop += 10

3. 현재 스크롤 위치 얻기

DOM 요소들은 자신의 scrollLeft와 scrollTop 속성을 모두 가지고 있다. 하지만 모든 브라우저에서 적용되는 속성은 아니기 때문에 다른 속성으로 현재 스크를 위치 값을 얻어야 한다.

window.pageXoffset
window.pageYoffset
  • scrollLeft/scrollTop과는 달리 이 값들은 read-only다.

4. scrollTo() & scrollBy()

scrollLeft/scrollTop 값을 변경하여 스크롤할 수 있지만 일반적으로 사용되고 훨씬 간단한 방법이 있는데 바로 scrollTo() & scrollBy() 메서드다.

1) window.scrollTo(pageX,pageY)

  • 좌표의 절대값을 인자로 받는다.
  • pageX & pageY는 document 상단/왼쪽 모서리에서부터 계산되는 값이며 스크롤되어도 변하지 않는 값이다.

2) window.scrollBy(x,y)

  • 현재 위치에서 x, y 만큼 상대적으로 이동된다.

5. scrollIntoView()

elem.scrollIntoView()
  • 요소가 보여지도록 스크롤이 되는 메서드다.
  • 인자로 Boolean값을 받는데, true(default)이면 스크롤되어 요소가 화면의 top에서 보여지고, false면 화면의 bottom에서 보여진다.

👀 참고자료
https://ko.javascript.info/size-and-scroll
https://ko.javascript.info/size-and-scroll-window


❗ 느낀 점

연습하면서 함수, 반복문 등을 호출하여 해당 기능을 구현하였다. web API를 잘 이해하고 활용하면 보다 쉽게 코드를 작성할 수 있음을 알게된 주제였다. 화면의 사이즈 차이를 잘 구별하고 스크롤 기능을 더 연습하기로 하자.

profile
If you don't build your dream, someone will hire you to help build theirs.

1개의 댓글

comment-user-thumbnail
2021년 3월 13일

옛날에 잠깐 배울때는 무슨 의미인지 모르고 썼던것 같은데 민정님 포스팅 덕에 어떤 의미인지 알게된것 같아요 :) 좋은 정보 감사합니다! 저도 스크롤 넣어보려고하는데 참고하겠습니다!

답글 달기