Javascript 스크롤 이벤트

스크롤 이벤트

• web에서 발생하는 스크롤 이벤트를 이용해 다루는 방법을 써보았습니다.
• 직접 사용해본 결과만들 토대로 작성하였습니다.

스크롤 이벤트 감지하기

window.addEventListener('scroll', () => { 
  //스크롤을 할 때마다 로그로 현재 스크롤의 위치가 찍혀나온다.
  console.log(window.scrollX, window.scrollY);
});

• 위 이벤트리스너를 사용하면 스크롤 이벤트가 발생 할 때마다 지정한 함수가 발생한다.
• 이때 함수에 window.scrollX 혹은 window.scrollY 함수를 사용하면 브라우저 왼쪽상단을 기준으로 현재 스크롤 위치(X, Y) 좌표를 알 수있다.

마우스 휠 이벤트 감지하기

//javascript의 경우 인자값으로 e만 주면 된다.
window.addEventListener('wheel', (e: WheelEvent) => { 
  console.log(e.deltaY, e.deltaX);
});

• wheel 이벤트 감지를 사용하며 e.deltaY 값이 양수면 down wheel, 음수면 up wheel로 판단할 수 있다.
• 마찬가지로 e.deltaX 는 양수일 때 오른쪽, 음수일 때 왼쪽으로 판단할 수 있다.

스크립트로 스크롤 움직이기

window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });

• top : 위에서 부터 얼마만큼 떨어진 위치인지 지정 (픽셀단위)
• left : 왼쪽으로 부터 얼마만큼 떨어진 위치인지 지정 (픽셀단위)
• behavior : 기본값은 'auto' 이며 순간이동 하듯이 화면 전환이 이루어지고
  'smooth' 를 사용했을 경우 화면전환이 부드럽게 바뀐다.

요소의 정보 확인하기

• 스크롤 이벤트에 필요한 정보를 알기위한 글을 작성했습니다.

현재 뷰의 크기 알아내기

window.innerHeight; //뷰의 세로 사이즈 알아내기 (픽셀단위)
window.innerWidth; //뷰의 가로 사이즈 알아내기 (픽셀단위)

• 뷰 바깥의 브라우저 크기까지 포함하여 알아내고 싶을 땐 outerHeight, outerWidth 를 사용하면 된다.

요소의 정보 알아내기

요소.offsetTop; //해당 요소의 위로부터 떨어진 픽셀 거리
요소.offsetLeft; //해당 요소의 왼쪽으로부터 떨어진 픽셀 거리
요소.offsetHeight; //해당 요소의 픽셀 세로크기
요소.offsetWidth; //해당 요소의 픽셀 가로크기

요소.getBoundingClientRect(); //현재 뷰를 기준으로 요소의 정보를 가져온다.

• 요소를 지정하는 방법은 document.querySelector 혹은 리액트에서 ref를 사용하는 방법 등이 있다.