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 相关文章推荐
插件:检测javascript的内存泄漏
Mar 04 Javascript
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
Bootstrap精简教程
Nov 27 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 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中output_buffering
2015/07/13 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
php简单截取字符串代码示例
2016/10/19 PHP
js window.event对象详尽解析
2009/02/17 Javascript
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
Python中文件操作简明介绍
2015/04/13 Python
浅谈Python基础之I/O模型
2017/05/11 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
详解flask入门模板引擎
2018/07/18 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
2015试用期转正工作总结
2014/12/12 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
2016年母亲节寄语
2015/12/04 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
Python自动化之批量处理工作簿和工作表
2021/06/03 Python