Vue는 본체의 스크롤 높이를 계산하거나 감시할 수 있습니까?

Vue는 본체의 스크롤 높이를 계산하거나 감시할 수 있습니까?

계산 또는 워치를 사용하여 본체의 스크롤 높이 변화를 감지하려고 하지만 작동하지 않습니다.

코드는 다음과 같습니다.

computed: {
    bodyScrollHeight() {
        return document.body.scrollHeight;
    }
},

watch:{
    bodyScrollHeight: function(newValue) {
        this.watchScrollHeight = newValue;
        this.myFunction(newValue);
    }
},

CodePen 링크: https://codepen.io/chhoher/pen/wvMoLOg

계산된 속성 반환이 있는 경우document.body.scrollHeight반응하지 않습니다.다른 방법으로 듣고 Vue에게 변경을 알려야 합니다.

내가 알기로는 스크롤 높이가 변경된 것을 알 수 있는 유일한 방법은 다음과 같은 작업을 수행할 수 있도록 스크롤 높이를 폴링하는 것입니다.

new Vue({
  data: () => ({
    scrollHeight: 0,
    interval: null,
  }),

  mounted() {
    this.interval = setInterval(() => {
      this.scrollHeight = document.body.scrollHeight;
    }, 100);
  },

  destroyed() {
    clearInterval(this.interval);
  },

  watch: {
    scrollHeight() {
      // this will called when the polling changes the value
    }
  },

  computed: {
    doubleScrollHeight() {
      // you can use it in a computed prop too, it will be reactive
      return this.scrollHeight * 2;
    }
  }
})

언급URL : https://stackoverflow.com/questions/62449695/can-vue-computed-or-watch-bodys-scrollheight