vue h5监听滚动条距离顶部和底部的距离

在Vue.js中监听滚动条距离顶部或底部的距离，你可以使用JavaScript的`window.onscroll`事件，并结合滚动条的高度属性来计算。这里是一个简单的示例：

new Vue({
  el: '#app',
  data() {
    return {
      scrollTop: 0,
      scrollBottom: 0,
    }
  },
  mounted() {
    window.addEventListener('scroll', this.updateScrollPositions);
  },
  methods: {
    updateScrollPositions(e) {
      const { scrollTop, clientHeight, documentElement } = window;
      this.scrollHeight = documentElement.scrollHeight; // 获取总高度
      this.scrollTop = scrollTop; // 滚动条距离顶部的距离
      this.scrollHeight - scrollTop <= clientHeight ? (this.scrollHeightBottom = true) : (this.scrollHeightBottom = false); // 判断是否接近底部
    },
  },
  computed: {
    scrollHeightBottom() {
      return this.scrollHeight - this.scrollTop < window.innerHeight * 0.9; // 例如当剩下10%时认为到达了底部
    },
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.updateScrollPositions);
  },
})

在这个例子中，我们在`mounted`生命周期钩子中添加滚动事件监听，每次滚动都会调用`updateScrollPositions`方法。该方法会更新滚动位置、总高度以及一个判断是否接近底部的值。