JS scrollEvent

오늘 했던 것

• 협업 프로젝트 최종 Merge
• scrollEvent 연습
• canvas 연습

scrollEvent

• 브라우저(window)나 요소(div)에서 스크롤을 할 때
  그 스크롤 이벤트에 대한 정보(스크롤 높이, 양, 현재 스크롤 위치 등..)를
  객체로 받을 수 있어 멋있는 기능에 활용할 수 있다.

오늘 만든 것

• 스크롤 위치에 따라 변하는 네비게이션 바
• 보험 약정 문서 기능(?)

1. 스크롤 위치에 따라 변하는 네비게이션 바

• window.scrollY를 사용하여 스크롤한 양을 알 수 있다.
• 스크롤한 양이 정해둔 값을 넘어가면 네비게이션 바의 style 속성을 바꾼다.
• 간단하지만 섬세하다. 트랜지션에 따라 예쁘게 사용 가능할 거 같다.
• 어려운 부분은 없었다.
  

<.js>
  
// 브라우저 창의 scroll 이벤트 감지
window.addEventListener('scroll', (e) => {
// window.scrollY: 전체 페이지에서 스크롤 얼만큼 내렸냐
// (호환성 좋게 쓰려면 window.pageYOffset 사용)
  if (this.scrollY > 100) {
    document.querySelector('h1').style.fontSize = `1rem`
    document.querySelector('nav').style.padding = `1rem 3rem`
  } else { 
    document.querySelector('h1').style.fontSize = `2rem`
  }
})

2. 보험 약정 문서

• 처음부터 끝까지 스크롤을 내려야
  버튼이 활성화 되는 기능을 따라해봤다.
• 요소.scrollHeight 로 요소의 실제 높이를 구할 수 있다.
• 요소.scrollTop 으로 overflow: scroll 된 요소의 스크롤 양을 구할 수 있다.
• 요소.clientHeight 로 overflow 로 가려지지 않은 부분의 높이를 구할 수 있다.

<.js>
  
// overflow:scroll 되어있는 div요소 space에 이벤트 감지
space.addEventListener('scroll', (e) => {

// div의 스크롤 양 === div의 실제 높이
  if (e.target.scrollTop === e.target.scrollHeight) {
    button.style.backgroundColor = `rgb(111, 192, 255)`
  } else {
    button.style.backgroundColor = `#eee`
  }
})

첫 시도 실패

• 스크롤을 끝까지 내리면 요소 높이의 끝인데...? 라고
  생각했지만 끝이 아니었다.

문제였던 것

• 요소의 높이(1187), 스크롤 양(687)를 console에 찍어보니
  두 값이 차이가 난다.

원인

• scrollTop의 값은 overflow로 된 요소의 일부를 내린 양이다.
  실제 div 요소의 총 높이만큼 스크롤을 내린 게 아니라는 것이다.

해결

• 현재 눈에 보이는 요소의 높이를 스크롤양에 더해주면 실제 요소 높이와 같아진다.
• 현재 눈에 보이는 요소의 높이는 요소.clientHeight 로 구할 수 있었다.

<.js>

// 스크롤양 + 눈에 보이는 부분의 요소 높이 === 요소의 실제 높이
if (e.target.scrollTop + e.target.clientHeight === e.target.scrollHeight) {
    button.style.backgroundColor = `rgb(111, 192, 255)`
  } else {
    button.style.backgroundColor = `#eee`
  }
})

정상적으로 작동한다.

느낀점

JS를 사용하여 인터렉티브한 효과를 만들 때
clientX, clientY, scrollTop, scrollHeigt 등
요소의 크기와 너비, 브라우저에서 감지되는 값 등을 활용해서
애니메이션을 주는 것을 봤다.
앞으로 동적인 웹사이트를 많이 만들고 싶기 때문에
요소들의 값을 활용하고 적용하는 것에 익숙해져야겠다.