[자바스크립트 js] 스크롤 이벤트 / scrollY 프로퍼티

일반적으로 웹문서의 크기가 브라우저 크기보다 클 때 스크롤바가 자동으로 나타난다.

그래서 일반적으로 스크롤 이벤트는 브라우저를 대변하는 window객체에 이벤트 핸들러를 등록하는 경우가 많다.

function printEvent(e) {
	console.log(e);
}

window.addEventListener('scroll', printEvent);

 

 

  스크롤 이벤트 활용 예시 scrollY

let lastScrollY = 0;

function printEvent(e) {
	const STANDARD = 30;
    
    const nav = document.querySelector('#nav');
    const toTop = document.querySelector('#to-top');
    
    if (window.scrollY > STANDARD) { //스크롤이 30PX를 넘었을 때
    	nav.classList.add('shadow');
        toTop.classList.add('show');
    } else { //스크롤이 30px를 넘지 않을 때
    	nav.classList.remove('shadow');
        toTop.classList.remove('show');
    }
    
    if (window.scrollY > lastScrollY) { //스크롤 방향이 아랫쪽일 때
    	nav.classList.add('lift-up');
    } else { //스크롤 방향이 윗쪽일 때
    nav.classList.remove('lift-up');
    }
    
    lastScrollY = window.scrollY;
}