zoukankan      html  css  js  c++  java
  • 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);
        });
      }
    
  • 相关阅读:
    [ABC142F] Pure
    [ABC141F] Xor Sum 3
    tarjan缩点
    LoadRunner录制:事务
    LoadRunner录制:脚本调试
    linux性能监控命令
    Python 3 解析 html
    Python 3 操作json 文件
    Python 数据驱动工具:DDT
    selenium 问题:OSError: [WinError 6] 句柄无效
  • 原文地址:https://www.cnblogs.com/shellon/p/15062154.html
Copyright © 2011-2022 走看看