JS 原生JS 判断滚动条滑动到底部(兼容苹果safari)
ListenerScoller () {
var pageIndex = 1;
var startX, startY;
document.addEventListener('touchstart',function (ev) {
startX = ev.touches[0].pageX;
startY = ev.touches[0].pageY;
}, false);
let _this = this;
document.addEventListener('touchend',function (ev) {
var endX, endY;
endX = ev.changedTouches[0].pageX;
endY = ev.changedTouches[0].pageY;
var dy = startY - endY;
var reach = Boolean;
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
console.log(scrollTop);
document.documentElement.scrollHeight == document.documentElement.clientHeight || document.body.clientHeight(兼容苹果safari) + scrollTop ? reach = true : reach = false
console.log(reach)
if(dy>30 && reach){
pageIndex++;
_this.setState({
isLoad:true
})
_ENV.post(_ENV.HOST+'/distributor/ticket-record?page='+pageIndex).then(data => {
let newData = data.data.list;
let original = _this.state.buys;
if(data.data.isLastPage){
_this.setState({
loadText:'没有更多数据'
})
}
let arr = original.concat(newData);
console.log(arr);
_this.setState({
buys:arr
});
}).catch(error=>{
console.log(error);
});
}
}, false);
}
JS 原生JS 判断滚动条滑动到底部(兼容苹果safari)的更多相关文章
- JS 原生JS 判断滚动条滑动到底部
window.addEventListener("scroll", function(event) { var scrollTop = document.documentEleme ...
- JS如何判断滚动条是否滚到底部
判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeigh ...
- JS实现判断滚动条滚到页面底部并执行事件的方法
需要了解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那 ...
- jquery如何判断滚动条滚到页面底部并执行事件
首先理解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那 ...
- jquery判断滚动条是否到底部
clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容.而只是单纯的DIV的高度. offsetHeight ...
- js原生封装自定义滚动条
/* * @Author: dothin前端 * @Date: 2015-11-21 00:12:15 * @Last Modified by: dothin前端 * @Last Modified t ...
- js 原生JS实现轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jsonrpc.js -- 原生js实现 JSON-RPC 协议
很早以前就涉及到多端远程调用 api的设计,那时候自己设计了个消息传递回调过程.最近了解了JSON-RPC协议,更正规,就可以自己实现下.逻辑也不复杂,没有限制底层消息传递的方式,可以应用到更多的场景 ...
- JQuery 判断滚动条是否到底部
BottomJumpPage: function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).he ...
随机推荐
- matlab 中关于 varargin 参数
varargin 提供了一种函数可变参数列表机制,允许调用者调用该函数时根据需要来改变输入参数的个数: varargin{1}代表可变参数列表的第一个实参,同理varargin{2}代表可变参数列表的 ...
- LAMP集群项目五 项目备份
1.打包到本地 2.推送到备份服务器 3.删除若干天前的备份 ip=`awk '/IPADDR/' /etc/sysconfig/network-scripts/ifcfg-eth0 |awk -F ...
- ng2-file-upload上传附件同时传参
由于业务需要,需要的场景是发某条公告的时候能够上传附件,不只是图片,图片的话可以直接用base64传给后台,但上传附件这个就不能这样干了, 与此同时,每条公告都有一个对应的唯一标识id, 附件以文件流 ...
- ipad4没有声音提示消息
打开『设置』-『通用』-侧边开关用于: 1:锁定屏幕旋转 2:静音 √ 把对号去掉 选择1即可
- Python全栈day17(文件处理)
一,文件处理流程 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 二,文件打开模式 r只读 (默认打开模式是只读) w只写 a追加 三,文件操作实例 1.r读 read读取文 ...
- cmake The C compiler identification is unknown
本地安装有Visual Studio 2015 ,同时更新了update 3 执行上述报错 本地还安装Visual Studio 2017 使用cmake 没问题 分析: 在CMakeFiles/CM ...
- 让网站全面支持v4/v6 HTTP、HTTPS、HTTP/2最简单方法是增加Nginx反向代理服务器
bg6cq/nginx-install: nginx install script https://github.com/bg6cq/nginx-install [原创]step-by-step in ...
- Quartz 的使用
1. Quartz 入门案例 1.1 Quartz 相关jar包 quartz-2.2.3.jar quartz-jobs-2.2.3.jar 1.2 创建任务类 // 自定义任务类 public c ...
- Period---hdu1358(循环节 kmp)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1358 题意 :求给你个串,前i位子串由某个字符串重复k次得到,求所有的i和k(k>1); 例如: ...
- 前端构建工具gulpjs的使用介绍及技巧(一)
原文链接:http://www.cnblogs.com/2050/p/4198792.html gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非 ...