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());
})
<span id="lb" style="top:100px;left:100px;position:fixed;"></span><!--一个固定的span标记 滚动时方便查看-->
来源:http://www.jb51.net/article/48714.htm
jQuery scroll事件实现监控滚动条分页示例(转)的更多相关文章
- scroll事件实现监控滚动条并分页显示示例(zepto.js)
scroll事件实现监控滚动条并分页显示示例(zepto.js ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页 ...
- scroll事件实现监控滚动条并分页显示示例(zepto.js )
今天做了一个类似于手机端京东首页的页面,效果图如下: 刷新页面的时候,标题栏(也就是搜索栏),背景是透明的,当我们往下滑的时候,可以改变标题栏的背景透明度(渐变效果): 当标题栏滑过轮播图后,透明度就 ...
- scroll事件实现监控滚动条改变标题栏背景透明度(zepto.js )
今天做了一个类似于手机端京东首页的页面,效果图如下: 刷新页面的时候,标题栏(也就是搜索栏),背景是透明的,当我们往下滑的时候,可以改变标题栏的背景透明度(渐变效果): 当标题栏滑过轮播图后,透明度就 ...
- 扩展jquery scroll事件,支持 scroll start 和 scroll stop
效果预览: github: https://besswang.github.io/webapp-scroll/ 参考地址: http://www.ghugo.com/special-scroll-ev ...
- jQuery scroll事件
scroll事件适用于window对象,但也可滚动iframe框架与CSS overflow属性设置为scroll的元素. $(document).ready(function () { //本人习惯 ...
- jquery scroll()滚动条事件
最近做项目用了到scroll滚动条事件,花了很多时间做搜索,没有很好的先整理思考后再去搜索,做编码事件时,没有事先考虑清楚,理清思路,先做简单的测试成功后,再完成其他的实现. 1.scroll()事件 ...
- jQuery之事件和批量操作、事件委托示例
一.常用事件 click(function(){...}) // 点击时触发 focus(function(){...}) // 获得焦点触发 blur(function(){...}) // 失去焦 ...
- Javascript和jquery事件--滚动条事件和自定义滚动条事件样式
很想把滚动条事件跟鼠标滚轮事件放在一起,那就直接写在这一篇了.除了事件以外,对滚动条样式的调整也记在这里吧. 滚动条是浏览器的默认事件,使用overflow:auto/scroll都有可能出现,它的默 ...
- JQUERY 滚动 scroll事件老忘记 标记下
制作笔记 这个scroll事件 老忘记.... 写的太垃圾了 希望有路过的大神指点的吧~ 这个貌似应该写个函数里 调用好些的吧~ 写个类这样的 也方便扩展貌似 不过就是想想 ~ $(windo ...
随机推荐
- 剑指Offer:面试题33——把数组排成最小的数(java实现)(未完待续)
问题描述: 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323. 思路1: ...
- C#小程序飞行棋关卡操作
飞行棋关卡操作 1.分析设计 飞行棋的基本规则为二人轮流掷骰子,则此处为循环结构,然后根据投掷出的点数进行前进<注:在每一步前进之后均应该判断是否走完了游戏>,在遇到关卡时进行相应的操作, ...
- php命名空间和autoload
参考: 1.http://www.cnblogs.com/thinksasa/p/3423480.html PHP的命名空间 2.http://blog.jjonline.cn/phptech/15 ...
- javascrip小笔记
function getCookie(name) {//获取name为 var arr, reg = new RegExp("(^| )" + name + "=([^; ...
- java.lang.IllegalArgumentException: template not initialized; call afterPropertiesSet() before using
在使用spring-data-redis时使用junit测试报错: java.lang.IllegalArgumentException: template not initialized; call ...
- Zepto 使用过程中遇到的问题总结
简言之,zepto 是移动端的 jQuery,虽然很多地方不完全相同,不过详细的内容就不介绍了,主要把使用 zepto 时遇到过的问题总结一下. zepto 是分成多个模块的,最基础的文件不包含 to ...
- 嵌入式: jffs2,yaffs2,logfs,ubifs文件系统性能分析
在嵌入式领域,FLASH是一种常用的存储介质,由于其特殊的硬件结构,所以普通的文件系统如ext2,ext3等都不适合在其上使用,于是就出现了专门针对FLASH的文件系统,比较常用的有jffs2,yaf ...
- CS 231n----Assignment1 记录
记录下在完成cs231n的Assignment1过程中的一些东西. 1. scores是一个N*C的array,N是训练样本个数,C是标签.y是(N,)的数组,取出每一个样本对应的score,可以用以 ...
- android开发--Application
Android Application介绍 一.先看看文档里怎么说 Base class for those who need to maintain global application state ...
- SQL Server 自定义聚合函数
说明:本文依据网络转载整理而成,因为时间关系,其中原理暂时并未深入研究,只是整理备份留个记录而已. 目标:在SQL Server中自定义聚合函数,在Group BY语句中 ,不是单纯的SUM和MAX等 ...