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 ...
随机推荐
- Java各种日期格式的获取和设置指定日期
因为近期在做一个项目,发现项目中日期设置的bug,于是查阅了多方资料后.最终攻克了,为此写篇总结.方便日后的查阅. 多的不说了.直接上代码 package com.example.testdate; ...
- jQuery源码分析-each函数
本文部分截取自且行且思 jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大,下面就这个函数做了详细讲解: 复制代码代码 /*! * jQuer ...
- std::unique_lock
/*与Mutex RAII相关,方便线程上锁,相比std::lock_guard提供了更好的上锁解锁控制,反正我是没看出来也是在构造时上锁,在析构时解锁,感觉和lock_gurad大差不差都是在线程函 ...
- matlab 中关于 varargin 参数
varargin 提供了一种函数可变参数列表机制,允许调用者调用该函数时根据需要来改变输入参数的个数: varargin{1}代表可变参数列表的第一个实参,同理varargin{2}代表可变参数列表的 ...
- Django学习笔记第十一篇--关于session
一.session和sessionid: sessionid是cookie的一个字段,sessionid一般如下: """请求报文""" & ...
- Navicat连接阿里云(centos7.3)的MySQL数据库遇到的问题及解决方法
注:本文涉及到的解决方案都是我遇到的问题的对应解决方案,不一定适用于每一个人,如果问题仍然存在,请继续百度查询其他解决方法 1. 首先是登录阿里云MySQL的一些必要信息(登录其他云主机的mysql ...
- 160331、使用@Controller注解为什么要配置<mvc:annotation-driven />
为了解决静态资源访问的问题,servlet改成了拦截所有请求,即/,并添加了默认的servlet,这时候*.do请求不能被控制器捕捉了,页面错误为404.直到添加了<mvc:annotation ...
- Strut2流程分析-----从请求到Action方法()
手写请求会通过strutsPrepareAndExcuteFliter的doFilter()方法 然后会调用StrutsActionProxy类的excute()方法,生成一个代理类(ActionPr ...
- Python全栈day21(函数的解耦)
针对上一篇对文件的操作程序,执行一次操作的函数查询,添加,修改,删除都需要在函数里面定义文件处理的过程,整体函数看起来比较乱,代码重复过多 下面新定义一个函数专门用于处理文件操作,然后在不同的函数里面 ...
- Code Forces Bear and Forgotten Tree 3 639B
B. Bear and Forgotten Tree 3 time limit per test2 seconds memory limit per test256 megabytes inputst ...