js判断是否下拉刷新

 if(document.body.scrollTop + window.innerHeight>=document.body.clientHeight-10){
      this.loadPointsList();
 }
//下面这个是用jquery
if($(document).scrollTop() + $(window).height() > $(document).height() - 10) {
     this.loadPointsList();
}

document.body.scrollTop用法如下:

网页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth    (包括边线的宽);
网页可见区域高: document.body.offsetHeight   (包括边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;

scrollHeight: 获取对象的滚动高度。  
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置  
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标  
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

要获取当前页面的滚动条纵坐标位置,用:
document.documentElement.scrollTop;
而不是:
document.body.scrollTop;
documentElement 对应的是 html 标签,而 body 对应的是 body 标签

时间: 2024-11-11 04:54:46

js判断是否下拉刷新的相关文章

Ionic Js三:下拉刷新

在加载新数据的时候,我们需要实现下拉刷新效果,代码如下: HTML 代码 <body ng-app="starter" ng-controller="actionsheetCtl" > <ion-pane> <ion-content > <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-ref

iscroll4实现下拉刷新和下拉加载更多

开发项目中,需要用到下拉刷新,开始本来打算自己写这个效果的.但是,自己写的效果不流畅,显得死板.通过查询相关资料,发现了iscroll插件. iScroll是一种高性能,小体积,无依赖性,跨平台的JS滚动,下拉刷新插件,可以动态加载分页内容.它适用于台式机,手机和智能电视.它的性能和尺寸大力优化等提供的一致好评现代老设备的平滑效果. 版本:iscroll4 代码如下: html代码 <!DOCTYPE html> <html> <head> <title>下

ios下拉刷新上拉加载EGORefresh简单实现

前提下载 EGORefreshTableHeaderView.h  EGORefreshTableHeaderView.mEGORefreshTableFootView.h     EGORefreshTableFootView.m  以及8张图片并拖入工程 在.pch文件里导入 #import "EGORefreshTableHeaderView.h" #import "EGORefreshTableFootView.h"在.h文件里 UIScrollViewDe

Maxwin-z/XListView-Android(下拉刷新上拉加载)源码解析(一)

本次解析的内容,是github上一个用于下拉刷新上拉加载的控件xlistview,这个功能相信大家在开发的过程中会经常用到. 控件的源码地址是https://github.com/Maxwin-z/XListView-Android 在这个控件之前,我看过一些相同功能的控件,挑选后觉得XListView功能比较完善,而且易于理解.在android-open-project里面,有提到一个DropDownListView,个人使用过以后,觉得功能是具备了,但是操作体验不好,原因就是没有使用到Scr

原生js实现简单的下拉刷新功能

前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一.创建简单的html页面: 假设代码里的float-box是一个主页面. 二.封装下拉刷新的功能模块: (1)首先创建一个Slide构造函数,用来初始化属性与函数. function Slide(dom){ this.start_y=null;//手指滑动屏幕的初始位置 this.end_y=null

JS实现下拉刷新和上拉加载

<!DOCTYPE html><html><head> <title></title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> <style type="text/css"> #slideDown{margin-t

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件.iScroll不仅仅是 滚动.它可以处理任何需要与用户进行移动交互的元素.在你的项目中包含仅仅4kb大小的iScroll,你的项目便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能.iScroll的强大毋庸置疑,本人也非常欢迎大家使用iScr

JS实现移动端下拉刷新更多分页请求功能方法2.0

本次2.0升级版为js实现移动端加载更多下拉刷新更多分页请求功能方法(数据一次请求,前端分页,适用于数据流量较少,数据量压力小的页面)同时新增loading组件,turnToTop组件. 本文原创非转载,如需转载请注明出处:http://www.cnblogs.com/A-QBlog/p/7068959.html 废话不多说,直接上代码: 1 ;(function (w, $) { 2 3 var loadmore = { 4 /*单页加载更多 通用方法 5 * 6 * @param callb

使用dragloader.js插件实现上拉加载/下拉刷新..

在写代码时候有个需求是,在触屏页面,为了加快页面加载速度,案件列表每页展示5条数据: 然后点击更多,展示下一页数据: 但是为了触屏更好的体验,改为往上滑动案件列表,加载下一页数据:就是要实现上拉加载/下拉刷新的效果: 我只用到了 上拉加载: 参考资料:http://blog.csdn.net/xb12369/article/details/39202711 下面是写的demo: html代码: <!DOCTYPE html> <html lang="en"> &