[Vue.js] 스크롤을 통한 DOM 작업(사라진 제목 편)

스크롤할 때 DOM 작업을 수행할 때 tips입니다.
예를 들어, 스크롤에 따라 색상을 변경하고 높이를 변경합니다.
스크롤하면 사라지는 제목을 예로 들자.js의 DOM 작업 이해하기

스크롤 후 사라진 제목

index.vue

<template>
  <div class="sample">
    <!-- スクロールすると消えるタイトル -->
    <h2 :style="hiddenStyle" class="sample__title--hidden">タイトル</h2>
  </div>
</template>

템플릿은 이렇게 정의됩니다:style.hiddenStyle 좋아하는 변수를 적으면 됩니다.
index.vue

<script>
export default {
  data() {
    return {
      // タイトルの座標を保持
      targetRect: 0,
      hiddenStyle: {}
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      // タイトルを取得
      const title = document.querySelector(`.sample__title--hidden`);
      // タイトルの座標を取得
      const rect = title.getBoundingClientRect().top;

      // data()のtargetRectを更新
      this.targetRect = rect;
      // タイトルの座標がTOPから15px以上になったら隠す
      if (this.targetRect > 15) {
        this.$set(this.hiddenStyle, 'visibility', 'hidden');
      } else {
        this.$set(this.hiddenStyle, 'visibility', 'visible');
      }
    }
  }
};
</script>

코드에는 다음과 같은 내용이 쓰여 있다.

데이터에 스크롤 좌표 등록

데이터에 hiddenStyle 정의

mounted에서 마운트된 후 실행된 실례를 쓰는 처리
(스크롤할 때handleScroll 메서드를 호출하는 이벤트)

destroyed에서 실례가 폐기된 후 실행된 처리
(이동 트리거 삭제)

methods로 스크롤할 때의 처리

참고로 element.scrollTop는 상대 좌표이고 element.getBoundingClientRect는 절대 좌표이다.

주의

이번처럼 제목을 삭제할 때는 사용할 수 없다v-show.v-show는display: none이기 때문이다.
만약 스크롤의 조건이 사실이라면 display: none을 적용하면 요소 자체가 사라지고 가져올 수 없으며 스크롤 이벤트가 발생하지 않습니다.
요소를 삭제하지 말고 visibility: hidden로 숨기십시오.
(나는 처음에 v-show로 웃음을 자아냈다)

참고 자료

라이프 사이클 맵|Vue.js
element.getBoundingClientRect | JavaScript