[jQuery] 스크롤 감지 이벤트 (스크롤 이동 / 현재 스크롤 위치)

jQuery로 작성된 프로젝트를 수정하던 중 스크롤 감지 이벤트가 있다는 걸 알게 되었다.

기존 코드에서 스크롤을 내릴 경우 Header가 위로 올라가면서 가려지는 현상이 일어나 이를 해결하기 위해 현재 스크롤 위치를 사용하여서 문제를 해결 하려고 했는 데 쉽지 않는 과정이었다.. 다행히 스크롤 감지 이벤트를 사용하여 쉽게 해결 할 수 있었다!!!

---

첫 시도 때 사용한 현재 스크롤 위치를 출력하는 이벤트를 아래와 같이 사용한다.

 

현재 스크롤 위치 이벤트

$(window).scroll(function() {
  // 스크롤 이동 시 실행되는 코드
  $(window).scrollTop();
});

 

$('선택자').scroll(function() {
  // 스크롤 이동 시 실행되는 코드
  $(window).scrollTop();
})

[jquery] 스크롤이 브라우저 끝에 도달했을때 이벤트주기

 

스크롤 이동 감지 이벤트

: mousewheel 이벤트를 사용하여 손쉽게 스크롤을 내리고 있는 지 올리고 있는 지 알 수 있다. (body 태그 안에 사용)

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

  if (wheel > 0) {
    //스크롤 올릴때
    console.log("올리는 중");
  } else {
    //스크롤 내릴때
    console.log("내리는 중");
  }
});

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