Nuxt/Vue에서 위로 스크롤 및 아래로 스크롤을 감지하는 방법

그 와중에 근무시간에 이런거 만들어야지. 조금 위로 스크롤하면 전체 내비게이션 바를 표시해야 합니다. 그렇지 않으면 작은 바만으로도 충분합니다.

그렇기 때문에 이 함수가 위아래 스크롤 이벤트를 찾는 역할을 하는 함수를 정의해야 합니다. 그리고 나는 이것으로 그것을했습니다-

생성된 후크에서 먼저 이벤트 리스너를 추가해야 합니다.

created() {
        if(process.client){
             window.addEventListener("scroll", this.handleScroll);
        }

  },

그런 다음 내부methods와 handleScroll 함수에서 현재 스크롤 위치를 포함하는 변수를 선언하고 다음 스크롤 위치와 비교합니다.

handleScroll() {

    if(process.client){
      var currentScrollPosition = window.scrollY

      if(currentScrollPosition < this.scrollPosition){
         console.log("Scrolling up");
         this.showFullNav = true
         //your desire logic 
      }
      else{
          this.showFullNav = false
          console.log("Scrolling down");
         //your desire logic 

      }

      this.scrollPosition = window.scrollY
    }
}, 

그리고 마지막으로 페이지가 떠날 때 이 이벤트를 제거해야 합니다.

  destroyed() {
    if(process.client){
       window.removeEventListener("scroll",this.handleScroll);  
    }

  },

그게 다야...