上拉加载事件

//上拉加载更多
$(window).on("scroll",function() {

var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();

console.log(scrollTop, windowHeight, scrollHeight);

if(scrollTop + windowHeight == scrollHeight) {**请求AJAX**}
});

$(window).scroll(function () {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if (scrollTop + windowHeight == scrollHeight) {

//此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作

}
});

解析:

判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。
scrollTop为滚动条在Y轴上的滚动距离。
clientHeight为内容可视区域的高度。
scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。
从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。(兼容不同的浏览器)。

时间: 2024-08-12 18:22:17

上拉加载事件的相关文章

vue-music 关于Search(搜索页面)--上拉加载

建立搜索框组件页面,searchBox,组件接受一个可以自定义传入的placeholder 属性.input v-model 双向绑定数据关联到query 中, 在created中监听 query 变量将改变的新值派发给外部父组件,在search.vue 组件中将其引入 <div class="search-box"> <i class="icon-search"></i> <input type="text&qu

移动端touch事件 || 上拉加载更多

前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉 实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误的姿势,例如长按后再touchmove等会出现卡死的假象.(ps:当然, 我不认为是插件的问题,当时的想法是觉得引用的插件存在冲突),于是,我就直接通过封装touch事件完成上拉加载实现分页的功能. 备注:文章最后会加上为实现这个功能我找的一些插件 了解touch事件 在应用touch事件实现上拉加

原生js移动端touch事件实现上拉加载更多

大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: 1 //获取要操作的元素 2 var objSection = document.getElementsByTagName("div")[0]; 3 //给元素绑定监听事件 个人习惯把监听事件写在一块 4 objSection.addEventListener("touchstart", touchStart, false); 5 objSect

Mint-ui中loadmore(上拉加载下拉刷新)组件在ios中滑动会触发点击事件的解决方法

bug说明: Mint-ui中loadmore(上拉加载下拉刷新)组件 在 使用fastclick的情况下 ,在ios设备中滑动会触发点击事件: 解决方法: 我是按需引入,去项目中找到loadmore下的index.js,全部引入的要找mint下面mint-ui.common.js 路径如下:你的项目名/node_modules\mint-ui\lib\loadmore\index.js 搜索 handleTouchEnd ,记得写event进去 handleTouchEnd: function

微信小程序页面事件-下拉刷新,上拉加载更多

1.下拉刷新的概念及应用场景. 概念: 下拉刷新是移动端更新列表数据的交互行为,用户通过手指在屏幕上子上而下的滑动,可以触发页面的下拉刷新,更新列表数据. 应用场景: 在移动端,数据列表是常见的页面效果,更新列表数据是最基本的页面需求,相比于按钮刷新,定时刷新来说,下拉刷新的用户体验方便友好,已经成为移动端刷新列表数据的最佳解决方案. 微信小程序启动下拉刷新: 两种方式: 1.需要在app.json 的window选项中或页面配置中开启enablePullDownRefresh, 但是,一般情况

angual+mui 双栏上拉加载,微信里面禁用默认事件可用,可以防止浏览器回弹效果

//html 部分 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #2eafa9 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #596972 }

android Fragment 实例 Listfragment listiew 下拉刷新 上拉加载 横向滑动事件监听

Android Fragment开发实例及他色功能说明 代码太长,请网盘下载附件源代码: http://yunpan.cn/cs24a2Z7C5kRk (提取码:a0cf)  有疑问的欢迎联系QQ972910164 一. CustomListView说明:可下拉刷新,上拉加载,横向滑动接口回调, /** * 功能类似ListView,天机以下特性: * 1. 可下拉刷新,上拉加载,实现CustomListView.OnPullListener接口 * 3. Slide切换,实现CustomLis

ionic 的下拉刷新 与 上拉加载

<ion-view view-title="消息通知"> <ion-content class="padding"> <!-- <ion-refresher> 下拉刷新指令 --> <ion-refresher pulling-text="Pull to refresh" on-refresh="vm.doRefresh()"></ion-refresher&g

vue之better-scroll的封装,包含下拉刷新,上拉加载功能及UI(核心为借鉴,我仅仅是给轮子套上了外胎...)

先发原文作者.地址等信息.我把内容全部搬过来了,也可以去看原文.内容绝对是满满的干货,给原作者点赞!(我添加的内容在转载过来的后面,内容不多) 作者: ustbhuangyi 链接:http://www.imooc.com/article/18232 来源:慕课网 在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示: 也可以是横向滚动的导航栏,如图所示: 可以打开"微信 -> 钱包->滴滴出行"体验效果. 我们在实