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

Vue判断页面是否滚动到底部
 
通过判断当前页面是否到达底部来设置按钮的点击事件。
 
要判断当前页面是否到达底部需要用到三个距离——距离顶部的距离scrollTop、可视区域的高度clientHeight、滚动条的高度scrollHeight。
 
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);
 
    });
 
  }

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64722.shtml

张贴在3