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 相关文章推荐
DOM下的节点属性和操作小结
May 14 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
推荐4个原生javascript常用的函数
Jan 12 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
通过JS判断网页是否为手机打开
Oct 28 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
那些年一起学习的PHP(二)
2012/03/21 PHP
领悟php接口中interface存在的意义
2013/06/27 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
编写Js代码要注意的几条规则
2010/09/10 Javascript
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
node.js中的console用法总结
2014/12/15 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
javascript基本算法汇总
2016/03/09 Javascript
利用JS实现数字增长
2016/07/28 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
如何更优雅地写python代码
2019/07/02 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
python 两个数据库postgresql对比
2019/10/21 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
python空元组在all中返回结果详解
2020/12/15 Python
用Python 执行cmd命令
2020/12/18 Python
得到Class的三个过程是什么
2012/08/10 面试题
赞美老师的演讲稿
2014/05/22 职场文书
学习十八大的心得体会
2014/09/12 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
PHP策略模式写法
2021/04/01 PHP
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android