vue项目 判断滚动条是否到达底部

日常问题记录：

描述: 本项目比较年老，是vue2项目，今天进去改一个简单的需求，发现一个兼容性的bug 需求原来是：假如滚动条到达底部，则展示一个图片，在小设备上是没有问题的，但是在机型较大的手机上，判断到达的底部的代码一直有误差，大概相差200-400的距离。

刚开始设置了一个200的阈值，害怕有误差，但是isScrolledToBottom始终返回false,研究半天（寻求ai之后），加了nextTick之后，正确获得滚动的距离就正确了

    checkIsScrolledToBottom() {
      const { scrollTop, clientHeight, scrollHeight } = document.documentElement
      return scrollTop + clientHeight >= scrollHeight - 200
    },

正确写法如下：

  mounted() {
    this.$nextTick(() => {
      //这里写绑定的滚动事件
      bindScrollEvent()
    })
  },

    bindScrollEvent() {
      let self = this
      window.addEventListener("scroll", () => {
        if (self.isScrolledToBottom()) {
             //业务代码
        }
      })
    },

加上nextTick之后，正确获得滚动的距离。

当然现在也有其他的api可以使用，但是过于复杂，再加上学习成本，不建议用。

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log("页面已经滚动到底部");
      // 在这里可以触发加载更多内容等操作
      observer.unobserve(entry.target);
    }
  });
});
const lastElement = document.querySelector('.your-last-element-class');
observer.observe(lastElement);