JS/jQuery - 스크롤 이벤트 : 맨 위, 맨 아래, 요소 위치 감지, 스크롤 업&다운

닌니디자인 JS 썸네일

스크롤 이벤트

웹 페이지를 스크롤할 때 발생하는 이벤트. 마우스 휠을 사용하여 스크롤하거나 터치 기반 장치에서 스크롤 제스처를 사용할 때도 발생할 수 있다. 이벤트 핸들러를 사용하여 스크롤 이벤트를 감지하고, 사용자가 스크롤을 할 때 특정 동작을 수행할 수 있다.

check_circle Check

스크롤 이벤트내에 내용을 입력하면 스크롤이 발생할 때 마다 호출하기 때문에 이벤트를 한번만 호출해야 한다면 주의해야 한다.

 

 

스크롤 - 바닐라 스크립트

window.addEventListener('scroll', function() {
    // 스크롤 이벤트가 발생할 때 실행될 작업
    console.log('페이지가 스크롤됨!');
});

 

스크롤 - 제이쿼리

$(selector).scroll(function() {
    // 스크롤 이벤트가 발생할 때 실행될 작업
    console.log('페이지가 스크롤됨!');
});

 

 

 

---

 

맨 위, 맨 아래 감지

스크롤이 문서의 맨 위와 맨 아래에 도달했는지 감지하려면 현재 [현재 세로 스크롤 위치값]와, [문서의 전체 높이값], [브라우저의 뷰포트 높이 값]이 필요하다. 맨 위를 감지하는 방법은 세로 스크롤이 0에 위치했는지 확인하면 된다. [문서의 전체 높이 값]이 [ 현재 세로 스크롤 위치값 + 브라우저 높이값]과 동일하다면 맨 아래에 도달했다고 간주 할 수 있다.

 

 

맨 위, 맨 아래 - 바닐라스크립트

window.addEventListener("scroll", function() {
    let scrollTop = window.scrollY;
    let document_h = document.innerHeight;
    let window_h = window.innerHeight;
    let scrollBottom = scrollTop + window_h;
    
    // 스크롤이 맨위 일때
    if (scrollTop == 0) {
    	console.log('맨 위에 도착!');
    }
    
    // 스크롤이 맨 아래 일때
    if (document_h == scrollBottom) { 
    	console.log('맨 아래에 도착!');
    }
});

window.scrollY	현재 세로 스크롤 위치
document.innerHeight	문서의 전체 내부 높이
window.innerHeight	브라우저 뷰포트 높이

 

맨 위, 맨 아래 - 제이쿼리

$(window).scroll(function(){
    let scrollTop = $(window).scrollTop();
    let document_h = $(document).height();
    let window_h = $(window).height();
    let scrollBottom = scrollTop + window_h;
    
    // 스크롤이 맨위 일때
    if (scrollTop == 0) {
    	console.log('맨 위에 도착!');
    }
    
    // 스크롤이 맨 아래 일때
    if (document_h == scrollBottom) { 
    	console.log('맨 아래에 도착!');
    }
});

$(window).scrollTop()	현재 세로 스크롤 위치
$(document).height()	문서의 전체 내부 높이
$(window).height()	브라우저 뷰포트 높이

 

 

 

---

 

요소 위치 감지

스크롤이 위치에 따라 요소가 나타나는 등의 효과를 주기 위해 [현재 세로 스크롤 위치값]과 [해당 요소의 절대 위치값]이 필요하다. [현재 세로 스크롤 위치값]이 [해당 요소의 절대 위치값]에서 어느정도 범위에 도달했는지 확인하여 이벤트를 실행 할 수 있다.

 

 

요소위치 - 바닐라스크립트

window.addEventListener("scroll", function() {
    let scrollTop = window.scrollY;
    let rect = targetElement.getBoundingClientRect().top;
    let eTop = scrollTop + rect;
    
    // 스크롤이 해당 요소에 도달 했을 때
    if (scrollTop == eTop) {
    	console.log('요소에 도착!');
    }
});

window.scrollY	현재 세로 스크롤 위치
getBoundingClientRect().top	요소 상단의 상대적 위치
window.scrollY + getBoundingClientRect().top	요소 상단의 절대적 위치

 

요소위치 - 제이쿼리

$(window).scroll(function(){
    let scrollTop = $(window).scrollTop();
    let eTop = $(targetElement).offset().top;
    
    // 스크롤이 해당 요소에 도달 했을 때
    if (scrollTop == eTop) {
    	console.log('요소에 도착!');
    }
});

$(window).scrollTop()	현재 세로 스크롤 위치
$(targetElement).offset().top	요소 상단의 절대적 위치

 

 

 

---

 

스크롤 업&다운

스크롤을 위로 올리는지 아래로 내리는지 감지하기 위해 [이전 스크롤 위치]와 [현재 스크롤 위치]가 필요하다. [이전 스크롤 위치]의 초기값은 0으로 지정한 뒤, 스크롤 할때마다 현재 스크롤 위치값을 이전 스크롤 위치값으로 할당한다. [이전 스크롤 위치]보다 [현재 스크롤 위치]가 크면 아래로 스크롤 한 것이고, [현재 스크롤 위치]가 작으면 위로 스크롤 한 것이라고 간주 할 수 있다.

 

 

업&다운 - 바닐라스크립트

let prevScrollTop = 0;
 
window.addEventListener("scroll", function() {
	let scrollTop = window.scrollY;
    
    // 현재 스크롤 위치가 작을 때
    if(scrollTop < prevScrollTop) {
        console.log('위로 스크롤!');
    }
    
    // 현재 스크롤 위치가 클 때
    if(scrollTop > prevScrollTop) {
        console.log('아래로 스크롤!');
    }
    
    prevScrollTop = scrollTop;
});

prevScrollTop	이전 스크롤 위치
window.scrollY	현재 세로 스크롤 위치

 

업&다운 - 제이쿼리

let prevScrollTop = 0;
 
$(window).scroll(function(){
    let scrollTop = $(window).scrollTop();
    
    // 현재 스크롤 위치가 작을 때
    if(scrollTop < prevScrollTop) {
        console.log('위로 스크롤!');
    }
    
    // 현재 스크롤 위치가 클 때
    if(scrollTop > prevScrollTop) {
        console.log('아래로 스크롤!');
    }
    
    prevScrollTop = scrollTop;
});

prevScrollTop	이전 스크롤 위치
$(window).scrollTop()	현재 세로 스크롤 위치