<자바스크립트 기초> 14. 스크롤 이벤트 (1)

* 위치값 가져오기

 - 스크롤 이벤트를 이용하려면 스크롤에 따라 변하는 위치값을 가져올 수 있어야 한다.

 - 먼저 전체 다큐먼트의 스크롤에 따른 위치값을 받아보자.

(function() {
	const outputElem = document.querySelector('.output');
	window.addEventListener('scroll', function() {
		outputElem.innerHTML = window.pageYOffset;
	});

})();

 : 이벤트 리스너에 'scroll'을 입력함으로써 스크롤 이벤트를 받아올 수 있다.

  .pageYOffset 속성은 현재의 세로 위치 값을 픽셀단위로 표현한다.

  위의 코드를 실행시키면 output이라는 클래스에 스크롤에 따라 변하는 위치값을 보이도록한다. 

 

 - 만약 특정 객체의 처음 세로 위치만을 가져오려면 .offsetTop 속성을 사용하면 된다.

 

 - 위의 속성보다 더 발전된 메소드가 있는데, .getBoundingClientRect()가 그것이다. 이는 변할 때의 위치값 정보들을 갖고 있는 객체이다. 여기에는 top, bottom, left, x, y 등의 속성과 값을 갖고 있다. 이것을 아래에서 활용해보자.

 

 

* 위치값 활용하기

 - 여기서 만들 예제는 스크롤을 어느정도 내렸을 때 이미지가 커지도록 하는 이벤트이다. 

(function() {
	const outputElem = document.querySelector('.output');
	const imageElem = document.querySelector('.image');

	function showValue() {
		let posY = imageElem.getBoundingClientRect().top;
		outputElem.innerHTML = posY;

		if (posY < window.innerHeight * 0.2) {
			imageElem.classList.add('zoom');
		}
        
		else {
			imageElem.classList.remove('zoom');
		}
	}

	window.addEventListener('scroll', function() {
		showValue();
	});

})();

 : posY라는 변수에 이미지의 세로위치값을 받게 하였다. y가 아닌 top을 사용한 이유는 y속성은 익스플로러에서 작동하지 않을 수 있기 때문이다.

 

  posY의 값을 window.innerHeight와 비교해서 높이의 0.2가 되었을때 zoom클래스를 추가하도록 하였다. (zoom 클래스는 사전에 트랜스폼을 이용하여 scale(2)를 입력해두었다.)

 

  즉, 스크롤이 내려가면 내려갈수록 top은 작아지므로 어느정도에 다다랐을 때 크기가 커질 것이다. (이미지에는 미리 트랜지션을 입력하였으므로 자연스럽게 작동할 수 있다.)

 

  이제 이 함수를 윈도우의 이벤트리스너객체에 스크롤로 넣어주면 정상적으로 작동한다.

 

 

* 위치값 개선하기

 - 가장 위에서 봤었던 위치값을 가져오고 싶어서 사용한 window.pageYOffst은 실제로 사용할 때 한가지 문제에 부딪힌다. 창의 크기에 따라 최댓값이 변하는 것이 바로 그 문제이다. 이런 문제가 발생하는 이유는 위 객체는 스크롤 윗부분의 위치를 보여주기 때문이다.

 

 - 이를 개선하기위해 스크롤 윗부분이 비율로써 어느정도 위치에 있는지 표현해보자.

 - 위와 같이 전체 길이에서 스크롤의 크기만큼뺀 곳에서 스크롤의 윗부분을 보면 스크롤이 처음부터 끝까지 중에서 어디만큼 왔는지 알 수 있다.

let maxScrollValue = document.body.offsetHeight - window.innerHeight;

window.addEventListener('scroll', function() {
	console.log(pageYOffset/maxScrollValue);
})

 - maxScrollValue라는 임의의 변수에 다큐먼트의 높이(document.body.offsetHeight)에서 창의 높이(window.innerHeight) 즉 스크롤의 높이를 뺀 값을 담아주었다.

 

  이제 스크롤 이벤트에 pageYOffset을 위에 대한 비율로써 선언하면, 0부터 1까지의 값을 보여주게 된다.

 

 실제로 프로젝트에 활용할 때에 0부터 1은 매우 작은 숫자이므로 적당한 숫자를 곱하여 다양하게 활용가능하다.

 

 - 여기서 좀 더 나아가면 이미 열린창에서 창의 크기를 바꿨을 때를 대응해보자. 이는 모바일환경에서 가로모드와 세로모드의 변경에도 유연하게 대응하기 위해서이다.

let maxScrollValue;

function resizeHandler() {
	maxScrollValue = document.body.offsetHeight - window.innerHeight;
}

window.addEventListener('scroll', function() {
	console.log(pageYOffset/maxScrollValue);
})

window.addEventListener('resize', resizeHandler);
resizeHandler()

 : resizeHandler라는 함수를 만들어서 기존에 했었던 작업을 넣어주었다.

  그 후 resize이벤트가 일어날 때마다 이 함수가 실행되도록 하였고, 위에서 했듯이 창이 로드가 되었을 때도 실행되어야 하므로 함수를 가장 아래에 바로실행되도록 작성해주었다.

 

---

 

 

 

참고

 

 

이 글은 인프런에서 관련 강의를 수강하고 개인적으로 정리하며 작성한 글입니다.

 

 

 

 

인터랙티브 웹 개발

인터랙티브 웹 개발 제대로 시작하기 - 인프런