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);
        });
      }
    
  • 相关阅读:
    rem适配方案flexble.js
    Vue 的生命周期
    前端性能优化方案
    html2canvas解决保存图片模糊问题
    css弹窗动画效果
    数字键盘
    iOS 提交审核注意事项
    js屏幕滚动防抖和节流
    父元素设置固定宽度并设置overflow:scroll,如何让子元素撑开父元素
    存储过程
  • 原文地址:https://www.cnblogs.com/shellon/p/15062154.html
Copyright © 2011-2022 走看看