jQuery scroll事件实现监控滚动条分页示例


Posted in Javascript onApril 04, 2014

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标记 滚动时方便查看-->
Javascript 相关文章推荐
用于table内容排序
Jul 21 Javascript
jQuery 使用手册(一)
Sep 23 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
js实现收缩菜单效果实例代码
Oct 30 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
JS出现失效的情况总结
Jan 20 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
vue通过过滤器实现数据格式化
Jul 20 Javascript
javascript移出节点removeChild()使用介绍
Apr 03 #Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 #Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 #Javascript
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 #Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 #Javascript
单击和双击事件的冲突处理示例代码
Apr 03 #Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 #Javascript
You might like
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
jquery 常用操作方法
2010/01/28 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
python一键升级所有pip package的方法
2017/01/16 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
python+pygame实现坦克大战
2019/09/10 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
python解释器安装教程的方法步骤
2020/07/02 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
考试退步检讨书
2014/01/15 职场文书
生日寿宴答谢词
2014/01/19 职场文书
简历的自我评价
2014/02/03 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
爱我中华教学反思
2014/04/28 职场文书
写字楼租赁意向书
2014/07/30 职场文书
简短清晨问候语
2015/11/10 职场文书
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android