php滚动加载分页,jQuery scroll事件实现监控滚动条分页实例详解

这篇文章主要介绍了jQuery scroll事件实现监控滚动条分页简单示例,使用ajax加载,同时介绍了(document).height()与$(window).height()的区别,需要的朋友可以参考下

scroll事件适用于window对象，但也可滚动iframe框架与CSS overflow属性设置为scroll的元素。

代码如下:$(document).ready(function () { //本人习惯这样写了

$(window).scroll(function () {

//$(window).scrollTop()这个方法是当前滚动条滚动的距离

//$(window).height()获取当前窗体的高度

//$(document).height()获取当前文档的高度

var bot = 50; //bot是底部距离的高度

if ((bot + $(window).scrollTop()) >= ($(document).height() - $(window).height())) {

//当底部基本距离+滚动的高度〉=文档的高度-窗体的高度时；

//我们需要去异步加载数据了

$.getJSON("url", { page: "2" }, function (str) { alert(str); });

}

});

注意：(window).height()和(document).height()的区别

jQuery(window).height()代表了当前可见区域的大小，而jQuery(document).height()则代表了整个文档的高度，可视具体情况使用.

注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变，但是jQuery(document).height()是不变的。

代码如下:

$(document).scrollTop() 获取垂直滚动的距离即当前滚动的地方的窗口顶端到整个页面顶端的距离

$(document).scrollLeft() 这是获取水平滚动条的距离

要获取顶端只需要获取到scrollTop()==0的时候就是顶端了

要获取底端只要获取scrollTop()>=$(document).height()-$(window).height() 就可以知道已经滚动到底端了

代码如下:

$(document).height() //是获取整个页面的高度

$(window).height() //是获取当前也就是你浏览器所能看到的页面的那部分的高度这个大小在你缩放浏览器窗口大小时会改变与document是不一样的根据英文应该也能理解吧

自己做个实验就知道了

代码如下:

$(document).scroll(function(){

$("#lb").text($(document).scrollTop());

})

php滚动加载分页,jQuery scroll事件实现监控滚动条分页实例详解相关推荐

scroll事件实现监控滚动条并分页显示示例（zepto.js）
scroll事件实现监控滚动条并分页显示示例(zepto.js ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页 ...
foxmail邮件加载失败重试_java retry(重试) spring retry, guava retrying 详解
系列说明 java retry 的一步步实现机制. java-retry 源码地址情景导入简单的需求产品经理:实现一个按条件,查询用户信息的服务. 小明:好的.没问题. 代码 UserServi ...
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
这里分别采用后bind(eventType,[data],Listener)//data为可选参数,one()该方法绑定的事件触发一次后自动删除,unbind(eventType,Listener), ...
加载vue文件步骤_vue中.vue文件解析步骤详解
这次给大家带来vue中.vue文件解析步骤详解,vue中.vue文件解析的注意事项有哪些,下面就是实战案例,一起来看一下. 我们平时写的 .vue 文件称为 SFC(Single File Compo ...
php表单确认密码,jQuery表单验证之密码确认实例详解
本文主要为大家详细介绍了jQuery表单验证之密码确认的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 众所周知,在修改密码时会需要两次输入密码.这时如何确保两个密码框 ...
每日三思:微信小程序多层级父子组件如何在子组件滚动加载
碰到的问题是如果将孙子组件单独拿出来是能滚动加载数据的,但是如果父组件存在切换的tab,子组件也存在tab切换,子组件就无法滚动加载数据示意图代码结构刚开始的处理思路在子组件中使用滚动加载,但 ...
jquery ajax 滚动加载数据
jquery php 滚动加载数据(文件包 rollingpage) 效果如下: 页面加载时候($function(){ 自动加载第一页数据 }) 设置: var winH = $(window).h ...
jquery瀑布流布局和鼠标滚动加载
jquery部分: //引入JQ库(版本不同会有差别) <script src="https://cdn.bootcss.com.jquery/2.1.1/jquery.min.js& ...
微信小程序实现分页加载，触底加载下一页，滚动加载
这里我就不写wxml了,就是一个列表循环,直接看js代码逻辑,注释都写在代码后面了,这个方法可以实现无限滚动加载,直到加载完最后一条数据,也可以实现触底没数据后,二次触底可以从新加载刷新,学废了就给个 ...

php滚动加载分页,jQuery scroll事件实现监控滚动条分页实例详解

php滚动加载分页,jQuery scroll事件实现监控滚动条分页实例详解相关推荐

最新文章

热门文章