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);
});
}
vue 判断页面是否滚动到底部的更多相关文章
- js 判断浏览器是否滚动到底部
//jquery 实现代码 $(document).height() == $(window).height() + $(window).scrollTop() 1 整个空间的高度 包含(滚动条距离顶 ...
- 判断RecyclerView是否滚动到底部
转:http://www.jianshu.com/p/c138055af5d2 一.首先,我们来介绍和分析一下第一种方法,也是网上最多人用的方法: public static boolean isVi ...
- Vue聊天框默认滚动到底部
功能场景 在开发中,我们总能遇到某些场景需要运用到聊天框,比如客服对话.如果你不是一名开发人员,可能你在使用QQ或者聊天工具的时候并没有注意到,当你发出一条消息的时候,窗体会默认滚动到最底部,让用户可 ...
- jQuery 判断页面上下滚动
var t = 0, b = 0; $(window).scroll(function(){ t = $(this).scrollTop(); if(b < t){ console.log('向 ...
- jQuery判断页面滚动条滚动方向
废话不多说,直接上代码 $(window).scroll(function(){ var before = $(window).scrollTop(); $(window).scroll(functi ...
- vue离开页面销毁滚动事件
methods:{ handleFun(){ /**销毁处理*/ } }, beforeDestroy(){ window.removeEventListener("scroll&qu ...
- jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery判断页面滚动条(scroll)是上滚还是下滚
单纯判断滚动条方向 function scroll( fn ) { var beforeScrollTop = document.body.scrollTop, fn = fn || function ...
- [jquery]判断页面滚动到顶部和底部(适用于手机web加载)
//判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...
随机推荐
- 十行HTML实现增强现实--思途青岛
你想通过网络实现增强现实吗?现在你只需要 10 行 HTML 代码!真的!让我带你看一看代码,非常简单.我们最近发布了AR.js.你不需要安装任何应用,用你的手机通过网络就能体验到强大的增强现实.但让 ...
- Codeforces 536D - Tavas in Kansas(dp)
Codeforces 题目传送门 & 洛谷题目传送门 其实这题本该 2019 年 12 月就 AC 的(详情请见 ycx 发此题题解的时间),然鹅鸽到了现在-- 首先以 \(s,t\) 分别为 ...
- BZOJ 3238 差异
BZOJ 3238 差异 看这个式子其实就是求任意两个后缀的 $ LCP $ 长度和.前面的 $ len(T_i)+len(T_j) $ 求和其实就是 $ n(n-1)(n+1)/2 $ ,这个是很好 ...
- Codeforces 1423N - BubbleSquare Tokens(归纳+构造)
Codeforces 题目传送门 & 洛谷题目传送门 一道思维题. 题目没有说无解输出 \(-1\),这意味着对于任意 \(G\) 一定存在一个合法的排列方案.因此可以考虑采用归纳法.对于一个 ...
- fping (比ping更强大的ping工具)
Fping程序类似于ping(ping是通过ICMP(网络控制信息协议InternetControl Message Protocol)协议回复请求以检测主机是否存在).Fping与ping不同的地方 ...
- ZooKeeper 04 - ZooKeeper 集群的节点为什么必须是奇数个
目录 1 - 关于节点个数的说明 2 - ZooKeeper 集群的容错数 3 - ZooKeeper 集群可用的标准 4 - 为什么不能是偶数个节点 4.1 防止由脑裂造成的集群不可用 4.2 奇数 ...
- 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 ...
- day14函数递归调用
day14函数递归调用 1.装饰器叠加 def deco1(func1): def wrapper1(*args,**kwargs): print('=====>wrapper1 ') res1 ...
- 大数据学习day31------spark11-------1. Redis的安装和启动,2 redis客户端 3.Redis的数据类型 4. kafka(安装和常用命令)5.kafka java客户端
1. Redis Redis是目前一个非常优秀的key-value存储系统(内存的NoSQL数据库).和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list ...
- 零基础学习java------23---------动态代理,ip,url案例
1. 动态代理 2. ip,url案例 给定的access.log是电信运营商的用户上网数据,第一个字段是时间, 第二个字段是ip地址,第三个字段是访问的网站,其他字段可以忽略不计. 第一个字段是网段 ...