[Vue] 스크롤 이벤트 넣기

Vue에서 스크롤 이벤트를 넣기 위해서 Vue의 라이프사이클 created가 아닌 mounted에 리스너를 추가하였다.

//컴포넌트 인스턴스 마운트 후 호출

  mounted() {

    document.addEventListener("scroll", this.scrollEvents);

  },

  unmounted() {

    document.removeEventListener("scroll", this.scrollEvents);

  },

methods: {

    //스크롤 이벤트 메서드

    scrollEvents: function () {

 

      if (document.documentElement.scrollTop > 0) {

        this.isScroll = true;

      } else {

        this.isScroll = false;

      }

    },

 

created는 초기 데이터 설정은 끝 마쳤지만 DOM(웹페이지 객체화)이 완전히 생성되지 않기 때문에, mounted에 리스너를 추가해야한다. 

스크롤하면 생기는 '맨 위로' 버튼이라던지, 스크롤에 따라 요소 크기를 바꾼다던지의 이벤트를 추가할 수 있게 되었다. 

 

다른 블로그들을 찾아보면 페이지 전체가 아닌 요소 하나 스크롤에도 이벤트를 삽입할 수 있는 것 같다.