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 ...
随机推荐
- 【javaScript基础】马上调用函数表达式
在javaScript中,每一个函数被调用时,都会创建一个新的运行上下文.由于在一个函数里面定义的变量和函数仅仅能在里面訪问.在外面是不行的.上下文提供了一种非常easy的方法来创建私有性. //ma ...
- vue2.0非父子间进行通讯
在vue中,父组件向之组件通讯使用的是props,子组件向父组件通讯使用的是$emit+事件,那非父子间的通讯呢,在官方文档上只有寥寥数笔, 概念很模糊,这个空的vue实例应该放在哪里呢,光放文档并没 ...
- 传参方法:sharedApplication, NSUserDefaults, protocol 和 delegate(实例)
本文转载至 http://blog.csdn.net/learnios/article/details/8442201 分类: 功能模块2012-12-27 10:22 109人阅读 评论(0) 收 ...
- 关东升的iOS实战系列图书 《iOS实战:入门与提高卷(Swift版)》已经上市
承蒙广大读者的厚爱我的 <iOS实战:入门与提高卷(Swift版)>京东上市了,欢迎广大读者提出宝贵意见.http://item.jd.com/11766718.html ...
- CMS 收集器整理
基本说明: 目标:获取最短回收停顿时间 算法:标记-清除算法 线程:并发 步骤: 初始标记:(会STP) 标记一下 GC Roots 能直接关联到的对象,速度很快 并发标记:(耗时最长,且可与用户线程 ...
- POJ 2374 Fence Obstacle Course(线段树+动态规划)
Fence Obstacle Course Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 2524 Accepted: ...
- Python实现HMM(隐马尔可夫模型)
1. 前言 隐马尔科夫HMM模型是一类重要的机器学习方法,其主要用于序列数据的分析,广泛应用于语音识别.文本翻译.序列预测.中文分词等多个领域.虽然近年来,由于RNN等深度学习方法的发展,HMM模型逐 ...
- Linux磁盘分区工具的使用
----------fdisk分区工具---------- 一..下面来介绍fdisk分区工具的命令格式: fdisk是传统的Linux硬盘分区工具,也是Linux系统中最常用的一种硬盘分区 ...
- PAE 分页模式详解
2016-11-18 记得之前看windows内核原理与实现的时候,在内存管理部分,看到涉及到PAE模式的部分,提到此模式下可以让系统在虚拟地址还是32位宽的情况下,支持64GB的物理内存或者更多.当 ...
- Linux之Redis-redis哨兵集群详解
1.Sentinel 哨兵 Sentinel(哨兵)是Redis 的高可用性解决方案:由一个或多个Sentinel 实例 组成的Sentinel 系统可以监视任意多个主服务器,以及这些主服务器属下的所 ...