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 相关文章推荐
用js实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 Javascript
快速解决element的autofocus失效问题
Sep 08 Javascript
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
php生成shtml类用法实例
2014/12/09 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
Linux Interview Questions For software testers
2013/05/17 面试题
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
内科护士实习自我鉴定
2013/10/17 职场文书
学生学习总结的自我评价
2013/10/22 职场文书
应届实习生的自我评价范文
2014/01/05 职场文书
《小熊住山洞》教学反思
2014/02/21 职场文书
酒鬼酒广告词
2014/03/21 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
小学教代会开幕词
2016/03/04 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang