需求

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

实现思路

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

代码(在vue项目中使用)

  1. mounted() {
  2. this.$nextTick(() => {
  3. // 进入nexTick
  4. const body: any = document.getElementById("app"); // 获取滚动条的dom
  5. // 获取距离顶部的距离
  6. const scrollTop = body.scrollTop;
  7. // 获取可视区的高度
  8. const windowHeight = body.clientHeight;
  9. // 获取滚动条的总高度
  10. const scrollHeight = body.scrollHeight;
  11. if (scrollTop + windowHeight >= scrollHeight) {
  12. // 把距离顶部的距离加上可视区域的高度 等于或者大于滚动条的总高度就是到达底部
  13. this.show = true
  14. } else {
  15. this.show = false;
  16. // 滚动事件
  17. body.onscroll = () => {
  18. console.log("距顶部" + scrollTop + "可视区高度" + windowHeight + "滚动条总高度" + scrollHeight);
  19. if (scrollTop + windowHeight >= scrollHeight) {
  20. // 把距离顶部的距离加上可视区域的高度 等于或者大于滚动条的总高度就是到达底部
  21. this.show = true
  22. }
  23. }
  24. }
  25. console.log("距顶部" + scrollTop + "可视区高度" + windowHeight + "滚动条总高度" + scrollHeight);
  26. });
  27. }

vue 判断页面是否滚动到底部的更多相关文章

  1. js 判断浏览器是否滚动到底部

    //jquery 实现代码 $(document).height() == $(window).height() + $(window).scrollTop() 1 整个空间的高度 包含(滚动条距离顶 ...

  2. 判断RecyclerView是否滚动到底部

    转:http://www.jianshu.com/p/c138055af5d2 一.首先,我们来介绍和分析一下第一种方法,也是网上最多人用的方法: public static boolean isVi ...

  3. Vue聊天框默认滚动到底部

    功能场景 在开发中,我们总能遇到某些场景需要运用到聊天框,比如客服对话.如果你不是一名开发人员,可能你在使用QQ或者聊天工具的时候并没有注意到,当你发出一条消息的时候,窗体会默认滚动到最底部,让用户可 ...

  4. jQuery 判断页面上下滚动

    var t = 0, b = 0; $(window).scroll(function(){ t = $(this).scrollTop(); if(b < t){ console.log('向 ...

  5. jQuery判断页面滚动条滚动方向

    废话不多说,直接上代码 $(window).scroll(function(){ var before = $(window).scrollTop(); $(window).scroll(functi ...

  6. vue离开页面销毁滚动事件

    methods:{ handleFun(){    /**销毁处理*/ } }, beforeDestroy(){ window.removeEventListener("scroll&qu ...

  7. jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. jquery判断页面滚动条(scroll)是上滚还是下滚

    单纯判断滚动条方向 function scroll( fn ) { var beforeScrollTop = document.body.scrollTop, fn = fn || function ...

  9. [jquery]判断页面滚动到顶部和底部(适用于手机web加载)

    //判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...

随机推荐

  1. 十行HTML实现增强现实--思途青岛

    你想通过网络实现增强现实吗?现在你只需要 10 行 HTML 代码!真的!让我带你看一看代码,非常简单.我们最近发布了AR.js.你不需要安装任何应用,用你的手机通过网络就能体验到强大的增强现实.但让 ...

  2. Codeforces 536D - Tavas in Kansas(dp)

    Codeforces 题目传送门 & 洛谷题目传送门 其实这题本该 2019 年 12 月就 AC 的(详情请见 ycx 发此题题解的时间),然鹅鸽到了现在-- 首先以 \(s,t\) 分别为 ...

  3. BZOJ 3238 差异

    BZOJ 3238 差异 看这个式子其实就是求任意两个后缀的 $ LCP $ 长度和.前面的 $ len(T_i)+len(T_j) $ 求和其实就是 $ n(n-1)(n+1)/2 $ ,这个是很好 ...

  4. Codeforces 1423N - BubbleSquare Tokens(归纳+构造)

    Codeforces 题目传送门 & 洛谷题目传送门 一道思维题. 题目没有说无解输出 \(-1\),这意味着对于任意 \(G\) 一定存在一个合法的排列方案.因此可以考虑采用归纳法.对于一个 ...

  5. fping (比ping更强大的ping工具)

    Fping程序类似于ping(ping是通过ICMP(网络控制信息协议InternetControl Message Protocol)协议回复请求以检测主机是否存在).Fping与ping不同的地方 ...

  6. ZooKeeper 04 - ZooKeeper 集群的节点为什么必须是奇数个

    目录 1 - 关于节点个数的说明 2 - ZooKeeper 集群的容错数 3 - ZooKeeper 集群可用的标准 4 - 为什么不能是偶数个节点 4.1 防止由脑裂造成的集群不可用 4.2 奇数 ...

  7. A Child's History of England.9

    But, first, as it was important to know how numerous those pestilent Danes were, and how they were f ...

  8. day14函数递归调用

    day14函数递归调用 1.装饰器叠加 def deco1(func1): def wrapper1(*args,**kwargs): print('=====>wrapper1 ') res1 ...

  9. 大数据学习day31------spark11-------1. Redis的安装和启动,2 redis客户端 3.Redis的数据类型 4. kafka(安装和常用命令)5.kafka java客户端

    1. Redis Redis是目前一个非常优秀的key-value存储系统(内存的NoSQL数据库).和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list ...

  10. 零基础学习java------23---------动态代理,ip,url案例

    1. 动态代理 2. ip,url案例 给定的access.log是电信运营商的用户上网数据,第一个字段是时间, 第二个字段是ip地址,第三个字段是访问的网站,其他字段可以忽略不计. 第一个字段是网段 ...