vue 判断页面是否滚动到底部

需求

• 要求用户阅读完本页所有内容后，下一步按钮才可以点击。

实现思路

• 通过判断当前页面是否到达底部来设置按钮的点击事件。
• 要判断当前页面是否到达底部需要用到三个距离——距离顶部的距离scrollTop、可视区域的高度clientHeight、滚动条的高度scrollHeight。

代码（在vue项目中使用）

mounted() {
    this.$nextTick(() => {
      // 进入nexTick
      const body: any = document.getElementById("app");   // 获取滚动条的dom
      // 获取距离顶部的距离
      const scrollTop = body.scrollTop;
      // 获取可视区的高度
      const windowHeight = body.clientHeight;
      // 获取滚动条的总高度
      const scrollHeight = body.scrollHeight;
      if (scrollTop + windowHeight >= scrollHeight) {
        // 把距离顶部的距离加上可视区域的高度 等于或者大于滚动条的总高度就是到达底部
        this.show = true
      } else {
        this.show = false;
        // 滚动事件
        body.onscroll = () => {
          console.log("距顶部" + scrollTop + "可视区高度" + windowHeight + "滚动条总高度" + scrollHeight);
          if (scrollTop + windowHeight >= scrollHeight) {
            // 把距离顶部的距离加上可视区域的高度 等于或者大于滚动条的总高度就是到达底部
            this.show = true
          }
        }
      }
      console.log("距顶部" + scrollTop + "可视区高度" + windowHeight + "滚动条总高度" + scrollHeight);
    });
  }