자바스크립트에서 스크롤 이벤트를 적용하기 위한 방법을 적어본다.
window객체를 이용하여 현재 스크롤 위치를 가져올 수 있다.
window.addEventListener("scroll", (e) => { console.log("y", window.scrollY); })
스크롤을 할 때마다 현재 Y값을 px로 출력한다.
좌우는 scrollX로 사용하면 된다.
스크롤 할 때마다 작동되는 함수라 성능이슈가 발생할 수도 있으니
상황에 따라 throttle을 적용하자
이를 활용한 샘플은 다음과 같다.
// example
// scrolly가 100px 초과하면 element에 'class'라는 class 삽입
if (window.scrollY > 100) {
element.classList.add('class')
}
window.addEventListener("wheel", (e) => { console.log(e.deltaY, e.deltaX); }
휠 업다운 시, 이동된 px로 출력한다.
양수면 휠 다운 / 음수는 휠 업
이를 활용하여 각종 이벤트를 적용할 수 있다.
// example
// 휠다운이 발생되면 element에 'active'라는 class삽입
if (e.deltaY > 1) {
element.classList.add("active");
끝.