[javascript] 스크롤 내릴때 사라지고 올라갈때 나오는 검색바 만들기 (앱 호환)

 

window.addEventListener를 사용하면 매우 많은 이벤트 함수를 실행할 수 있다. 보통은 scroll, mouseWheel 이벤트를 사용해 휠스크린을 내릴시 간단하게 화면을 조작할 수 있다.

 

 

👉 mouse wheel 이벤트 보기

 

Element: wheel event - Web APIs | MDN

 

mouse wheel 이벤트를 사용할 경우의 문제점이 휠을 사용하지 않는 앱웹에선 작동하지 않는다는점이다.

이런경우 scroll 이벤트를 사용해 처리하는것이 좋다

 

👉 scroll 이벤트 보기

 

Document: scroll event - Web APIs | MDN

 

 

기존 scroll 값을 기본값에 저장하고 true 와 false로 핸들링이 가능하다

 

👉 예제코드

let scrollDown = false;
let scrollValue = 0

window.addEventListener("scroll", () => {
    if (window.scrollY > scrollValue) {
      this.scrollDown = true; // 내리면 사라지고
    } else {
      this.scrollDown = false; //올리면 나타나는
    }
    
    //vue에서 제공해주는 이벤트 관련 메소드 (없어도 상관없음)
    this.$nextTick(() => {
       scrollValue = window.scrollY;
    });
  });