[JAVASCRIPT/JQUERY] 스크롤 감지 이벤트 (mousewheel) - 스크롤이 위로올라가는중인지 내려가는중인지 현재 어느위치에 있는지..

마우스를 올렸는지.. 내렸는지 확인해 이벤트 등록하기 

 

보통 

웹사이트 헤더 부분이 마우스를 내렸을때 상단에 고정되도록하거나

 

스크롤 동작에따라 헤더에 이벤트를 주는 경우가 많다.

 

또는 본문에 스크롤이 어느정도 왔을 때에 따라 이벤트를 주기도 한다.  

 

 

다음과 같이 이벤트를 설정할 수 있다. 

 

$(".box").on('mousewheel',function(e){
var wheel = e.originalEvent.wheelDelta;

//스크롤값을 가져온다.
if(wheel>0){
//스크롤 올릴때
$("p.result").html("올림..");
} else {
//스크롤 내릴때
$("p.result").html("내림..");
}
});

 

 

$(window).scrollTop()을 이용하면 현재 위치도 알 수 있고

 

$("셀렉터").offset().top 을 통해 특정 엘리먼트의 위치값을 가져올 수 있다. 

 

이를 이용해 다양한 스크롤 이벤트를 줄 수 있다. 

 

 

 

 

 

 

이벤트 등록하기

(스크롤을 내리면 애니메이션 동작 => 애니메이션 동작이 완료된 후 스크롤 내리면 내려감)