✨ 핵심 기능
-
triggerBottom- 스크롤을 어디까지 했을 때 박스 뜨게 할 것인지
const triggerBottom = (window.innerHeight / 5) * 4;
브라우저 창의 높이를 5등분한 값의 4배, 즉 화면의 80% 지점에 해당하는 y좌표를 계산한다. -
box.getBoundingClientRect().top- 각 박스의 위치 확인
box 요소의 현재 화면에서의 상단 위치를 가져온다.
boxTop이 triggerBottom보다 작으면, 화면에 나타나도록 box에 "show" 클래스를 추가한다.
그렇지 않으면 box에서 "show" 클래스를 제거한다.
✨ CSS
overflow
마진 병합 현상을 신경쓰지 않기 위해 overflow: hidden 값으로 초기화를 하면 되지만 이 프로젝트에서는 스크롤 기능을 사용한다.
overflow의 기본 값은 visible로 스크롤 기능을 한다.
여기서는 밑으로는 스크롤을 하지만 옆으로는 애니메이션 때문에 옆으로도 스크롤이 되므로 x축으로는 hidden을 주어 삐져나오지 않게 한다.
overflow-x: hidden:nth-of-type 가상 클래스
- 정수 인덱스 값 (음수 x) -
:nth-of-type(1) - 키워드 값 (
odd/even) -:nth-of-type(odd) An + B형태의 사용자 지정 패턴 -:nth-of-type(2n+1)
transform
값을 옮기고 싶을 때 translate 사용!
transform: translateX(-200%);transition
애니메이션을 주고싶을 때 사용하는데 맨 앞에 오는 것은 그 속성이 변화할 때마다 애니메이션이 작동되는 것이다.
transition: transform 0.4s ease;✨ JavaScript
window vs viewport vs document
window- 브라우저 자체viewport- 스크롤 바를 제외한 크기document- 스크롤 바까지 포함한 크기
scroll 이벤트
스크롤 바를 조작하면 이벤트가 발생하며, 페이지를 스크롤할 때마다 원하는 이벤트를 실행할 수 있다.
스크롤 이벤트에는 window를 붙인다!
window.addEventListener('scroll', function(){ });window.scrollY
위에서부터 얼마나 스크롤 되었는지 px 단위로 알려준다.
window.addEventListener('scroll', function(){
console.log( window.scrollY )
});window.scrollTo(x, y)
해당 좌표로 스크롤 바를 강제 이동한다.
// 위에서부터 100px 위치로 스크롤 해줌
window.scrollTo(0, 100)window.scrollBy(x, y)
현재 위치에서 부터 스크롤 해준다.
// 현재위치에서 +100px 만큼 스크롤 해줌
window.scrollBy(0, 100)scrollTop / scrollHeight / clientHeight
scrollTop- 현재 웹페이지 스크롤 양scrollHeight- 현재 웹페이지의 가능한 스크롤 실제 높이clientHeight- 현재 웹페이지에서 보내는 높이
//현재 웹페이지 스크롤양
document.querySelector('html').scrollTop;
//현재 웹페이지의 스크롤 가능한 실제높이
document.querySelector('html').scrollHeight;
//현재 웹페이지에서 보이는 높이
document.querySelector('html').clientHeight;window.innerHeight
indow.innerHeight 브라우저 창의 내부 높이를 의미하며, 창틀을 제외한 뷰포트의 전체 높이나타낸다.
스크롤바를 포함한 브라우저 창의 가시적인 영역을 포함한다. (스크롤한 모든 높이x)
❗️ 콘솔등의 화면을 제외한 높이
콘솔 화면을 어디에 어느 크기로 오픈했는 지에 따라 값 달라질 수 있음
그러므로 고정 값을 안쓰고 innerHeight 을 사용하는 것 --> 콘솔 창 띄우면 값 달라지니까!
👀 그럼 스크롤까지 한 전체 높이를 보려면?
document.documentElement.scrollHeightdocument.body.scrollHeight
➡️ 문서의 전체 높이
Element.getBoundingClient
엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 객체를 반환한다.
반환 값은 padding & border-width를 포함해 전체 엘리먼트가 들어있는 가장 작은 사각형인 DomRect 객체이다.
❗️ 표준 박스 모델
element + padding + border
❗️ box-sizing: border-box 박스 모델
width + height
domRect = element.getBoundingClientRect();
뷰포트 영역(또는 스크롤 가능한 엘리먼트)에서 수행된 스크롤의 정도는 경계 사각형을 계산할 때 고려된다. 이는 사각형의 경계 모서리(top, right, bottom, left)는 스크롤링 위치가 변경될 때마다 그 값이 변경됨을 의미한다. (이 값들은 절대적인 것이 아니라 뷰포트에 상대적이기 때문입니다).
문서의 top-left 코너에 상대적인 경계 사각형이 필요하다면, 현재 스크롤링 위치를 top과 left 프로퍼티에 추가하여(이 값들은 window.scrollX와 window.scrollY를 사용하여 얻을 수 있음) 현재 스크롤링 위치로부터 독립적인 경계 사각형을 얻는다.
